update doc and demos; add mouse enter and leave events support

README.md

@@ -4,68 +4,98 @@ Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired
 
 ##### Usage
 
-- link wings
-
-```html
-<script src="wings.js"></script>
-```
-
-- add a canvas
-
 ```html
+<!-- create a canvas in html -->
 <canvas id="view" width="300px" height="300px">
 ```
 
-- add `View` and `Component` classes
-
 ```js
-const { View, Component } = Wings
-```
-
-- construct a view with a reference to the canvas
+// import wings in javascript (esm)
+import Wings from '@b00tc4mp/wings'
+// or require it (cjs)
+// const Wings = require('@b00tc4mp/wings')
 
-```js
-const view = new View(document.getElementById("view"))
-```
+// destructure it
+const { View, Component } = Wings
 
-- create a component class (example)
+// instantiate a view linked to a canvas
+const view = new View(document.getElementById('toggling-saluter'))
 
-```js
-class Box extends Component {
-	constructor() {
+// create a saluter abstraction
+class TogglingSaluter extends Component {
+	constructor(hello, bye) {
 		super()
 
 		// set the dimensions
-		this.width = this.height = 50
+		this.width = 150
+		this.height = 50
 
 		// set colors
 		this.backgroundColor = 'magenta'
 		this.borderColor = 'cyan'
 		this.borderWidth = 5
+
+		// set the text height for the salutation
+		this.textHeight = 16
+
+		// init the salutation value 
+		this.hello = hello
+		this.bye = bye
+		this.salutation = this.hello
+
+		// add behavior to toggle the salutation on click
+		this.on('MouseClick', () => {
+			if (this.salutation === this.hello)
+				this.salutation = this.bye
+			else
+				this.salutation = this.hello
+		})
+	}
+
+	render(context) {
+		// render the base layer
+		super.render(context)
+
+		// render the saluter value centered in the component
+		context.fillStyle = 'white'
+		context.font = this.textHeight + 'px verdana'
+		const width = context.measureText(this.salutation).width
+		context.fillText(
+			this.salutation,
+			(this.width - width) / 2,
+			(this.height + this.textHeight) / 2
+		)
 	}
 }
-```
 
-- create an instance and add it to the view
+// instantiate a saluter and center it at the top of the view
+const saluter = new TogglingSaluter('Hello, World!', 'Bye, World!')
 
-```js
-const box = new Box
+saluter.x = (view.width - saluter.width) / 2
+saluter.y = (view.height / 3 - saluter.height) / 2
 
-view.add(box)
-```
+// add the saluter to the view
+view.add(saluter)
 
-- locate it inside the view
+// instantiate a saluter and center it in the view
+const saluter2 = new TogglingSaluter('Hola Mundo!', 'Adiós, Mundo!')
 
-```js
-box.x = box.y = 100
-```
+saluter2.x = (view.width - saluter2.width) / 2
+saluter2.y = (view.height - saluter2.height) / 2
 
-- add a mouse reaction to it (example)
+// add the saluter to the view
+view.add(saluter2)
 
-```js
-box.on('MouseClick', () => alert('Hello, World!'))
-```
+// instantiate a saluter and center it at the bottom of the view
+const saluter3 = new TogglingSaluter('Ciao Mondo!', 'Addio, Mondo!')
 
-- and that's it
+saluter3.x = (view.width - saluter3.width) / 2
+saluter3.y = (view.height * 5 / 3 - saluter3.height) / 2
+
+// add the saluter to the view
+view.add(saluter3)
+
+// and that's it
+```
 
 See more examples at https://b00tc4mp.github.io/wings

dist/wings.cjs

@@ -4,13 +4,17 @@
  * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
  * 
  * @author manuelbarzi
- * @version 1.0.2
+ * @version 1.1.0
  */
 const Wings = (() => {
     class Component {
         constructor() {
             this.x = this.y = this.width = this.height = 0
-            this.mouse = {}
+            this.mouse = {
+                entered: false,
+                pressed: false,
+                dragging: false
+            }
             this.behaviors = []
             this.parent = null
             this.children = []
@@ -58,14 +62,26 @@ const Wings = (() => {
         mouseMove(event) {
             if (this.visible) {
                 if (this.isPointed(event.x, event.y)) {
+                    if (!this.mouse.entered) {
+                        this.mouse.entered = true
+                        this.fireEvent('MouseEnter', event)
+                    }
+
                     this.fireEvent('MouseMove', event)
 
                     if (this.mouse.pressed) {
                         this.mouse.dragging = true
                         this.fireEvent('MouseDrag', event)
                     }
-                } else if (this.mouse.dragging)
-                    this.fireEvent('MouseDrag', event)
+                } else {
+                    if (this.mouse.entered) {
+                        this.mouse.entered = false
+                        this.fireEvent('MouseLeave', event)
+                    }
+
+                    if (this.mouse.dragging)
+                        this.fireEvent('MouseDrag', event)
+                }
 
                 if (this.children.length > 0)
                     for (const child of this.children)

dist/wings.mjs

@@ -4,13 +4,17 @@
  * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
  * 
  * @author manuelbarzi
- * @version 1.0.2
+ * @version 1.1.0
  */
 const Wings = (() => {
     class Component {
         constructor() {
             this.x = this.y = this.width = this.height = 0
-            this.mouse = {}
+            this.mouse = {
+                entered: false,
+                pressed: false,
+                dragging: false
+            }
             this.behaviors = []
             this.parent = null
             this.children = []
@@ -58,14 +62,26 @@ const Wings = (() => {
         mouseMove(event) {
             if (this.visible) {
                 if (this.isPointed(event.x, event.y)) {
+                    if (!this.mouse.entered) {
+                        this.mouse.entered = true
+                        this.fireEvent('MouseEnter', event)
+                    }
+
                     this.fireEvent('MouseMove', event)
 
                     if (this.mouse.pressed) {
                         this.mouse.dragging = true
                         this.fireEvent('MouseDrag', event)
                     }
-                } else if (this.mouse.dragging)
-                    this.fireEvent('MouseDrag', event)
+                } else {
+                    if (this.mouse.entered) {
+                        this.mouse.entered = false
+                        this.fireEvent('MouseLeave', event)
+                    }
+
+                    if (this.mouse.dragging)
+                        this.fireEvent('MouseDrag', event)
+                }
 
                 if (this.children.length > 0)
                     for (const child of this.children)