prevent default mouse down behavior (to avoid involuntary selections …

…of other html ele

ments; text elements); adjust build tool; update doc, package and page (add demo project link)

README.md

@@ -2,7 +2,13 @@
 
 Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing)
 
-##### Usage
+## Installation
+
+```sh
+$ npm i @b00tc4mp/wings
+```
+
+## Usage
 
 ```html
 <!-- create a canvas in html -->

build.js

@@ -1,12 +1,13 @@
 import { promises as fs } from 'fs'
+
     ; (async () => {
         try {
             const pack = JSON.parse(await fs.readFile('./package.json', 'utf8'))
             const content = (await fs.readFile('./wings.js', 'utf8')).replace(/[0-9]+.[0-9]+.[0-9]+/, pack.version)
 
-            fs.writeFile('./wings.js', content)
-            fs.writeFile('./dist/wings.cjs', content + '\n\nmodule.exports = Wings')
-            fs.writeFile('./dist/wings.mjs', content + '\n\nexport default Wings')
+            await fs.writeFile('./wings.js', content)
+            await fs.writeFile('./dist/wings.cjs', content + '\n\nmodule.exports = Wings')
+            await fs.writeFile('./dist/wings.mjs', content + '\n\nexport default Wings')
         } catch (error) {
             console.error(error)
         }

dist/wings.cjs

@@ -1,10 +1,10 @@
 /**
  * Wings JS
  * 
- * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
+ * Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
  * 
  * @author manuelbarzi
- * @version 1.1.0
+ * @version 1.1.1
  */
 const Wings = (() => {
     class Component {
@@ -92,6 +92,7 @@ const Wings = (() => {
         mouseDown(event) {
             if (this.visible) {
                 if (this.isPointed(event.x, event.y)) {
+                    event.originalEvent.preventDefault()
                     this.mouse.pressed = true
                     this.fireEvent('MouseDown', event)
                 }
@@ -129,6 +130,7 @@ const Wings = (() => {
                 if (this.isPointed(event.x, event.y))
                     this.fireEvent('MouseClick', event)
 
+
                 if (this.children.length > 0)
                     for (const child of this.children)
                         child.mouseClick(event)
@@ -197,6 +199,8 @@ const Wings = (() => {
 
             this.x = event.clientX - rect.left
             this.y = event.clientY - rect.top
+
+            this.originalEvent = event
         }
     }
 

dist/wings.mjs

@@ -1,10 +1,10 @@
 /**
  * Wings JS
  * 
- * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
+ * Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
  * 
  * @author manuelbarzi
- * @version 1.1.0
+ * @version 1.1.1
  */
 const Wings = (() => {
     class Component {
@@ -92,6 +92,7 @@ const Wings = (() => {
         mouseDown(event) {
             if (this.visible) {
                 if (this.isPointed(event.x, event.y)) {
+                    event.originalEvent.preventDefault()
                     this.mouse.pressed = true
                     this.fireEvent('MouseDown', event)
                 }
@@ -129,6 +130,7 @@ const Wings = (() => {
                 if (this.isPointed(event.x, event.y))
                     this.fireEvent('MouseClick', event)
 
+
                 if (this.children.length > 0)
                     for (const child of this.children)
                         child.mouseClick(event)
@@ -197,6 +199,8 @@ const Wings = (() => {
 
             this.x = event.clientX - rect.left
             this.y = event.clientY - rect.top
+
+            this.originalEvent = event
         }
     }
 

index.html

@@ -22,13 +22,13 @@ <h1>Wings</h1>
 
 		<p>Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing)</p>
 
-		<sup>1.1.0</sup>
+		<sup>1.1.1</sup>
 	</header>
 
 	<main>
 		<h2>Intallation</h2>
 
-		<pre><code class="language-sh">$ npm i @b00tc4mp/wings --hello</code></pre>
+		<pre><code class="language-sh">$ npm i @b00tc4mp/wings</code></pre>
 
 		<h2>Usage (example)</h2>
 
@@ -135,6 +135,13 @@ <h3>Steps</h3>
 
 // and that's it</code></pre>
 
+		<h2>Demo project</h2>
+
+		<p>
+			Check out this <a href="https://github.com/b00tc4mp/wings-demo" title="github demo repository"
+				target="_blank">repository</a> 👀
+		</p>
+
 		<h2>More examples</h2>
 
 		<article>

package.json

@@ -1,7 +1,18 @@
 {
     "name": "@b00tc4mp/wings",
     "description": "Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing)",
-    "version": "1.1.0",
+    "keywords": [
+        "Object-oriented",
+        "Component-based",
+        "UI",
+        "library",
+        "HTML",
+        "Canvas",
+        "Java",
+        "Swing",
+        "Wings"
+    ],
+    "version": "1.1.1",
     "homepage": "https://b00tc4mp.github.io/wings",
     "repository": {
         "type": "git",

scripts/counter-up.js

@@ -10,10 +10,8 @@
         constructor() {
             super()
 
-            // set the dimensions
             this.width = this.height = 50
 
-            // set colors
             this.backgroundColor = 'magenta'
             this.borderColor = 'cyan'
             this.borderWidth = 5
@@ -54,6 +52,7 @@
             cursorStyle.id = 'cursor-style'
             document.head.appendChild(cursorStyle)
         },
+
         hidePointer() {
             document.getElementById('cursor-style').remove()
         }

style.css

@@ -14,6 +14,10 @@ html {
 	height: 100%
 }
 
+body {
+	padding: 1rem;
+}
+
 body,
 header,
 article,

wings.js

@@ -1,10 +1,10 @@
 /**
  * Wings JS
  * 
- * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
+ * Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing).
  * 
  * @author manuelbarzi
- * @version 1.1.0
+ * @version 1.1.1
  */
 const Wings = (() => {
     class Component {
@@ -92,6 +92,7 @@ const Wings = (() => {
         mouseDown(event) {
             if (this.visible) {
                 if (this.isPointed(event.x, event.y)) {
+                    event.originalEvent.preventDefault()
                     this.mouse.pressed = true
                     this.fireEvent('MouseDown', event)
                 }
@@ -129,6 +130,7 @@ const Wings = (() => {
                 if (this.isPointed(event.x, event.y))
                     this.fireEvent('MouseClick', event)
 
+
                 if (this.children.length > 0)
                     for (const child of this.children)
                         child.mouseClick(event)
@@ -197,6 +199,8 @@ const Wings = (() => {
 
             this.x = event.clientX - rect.left
             this.y = event.clientY - rect.top
+
+            this.originalEvent = event
         }
     }