From 22441baf2b327d25f731ba2eca09a14b8c20f391 Mon Sep 17 00:00:00 2001 From: Manuel Barzi Date: Thu, 28 Dec 2023 23:08:12 +0100 Subject: [PATCH] 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 | 8 +++++++- build.js | 7 ++++--- dist/wings.cjs | 8 ++++++-- dist/wings.mjs | 8 ++++++-- index.html | 11 +++++++++-- package.json | 13 ++++++++++++- scripts/counter-up.js | 3 +-- style.css | 4 ++++ wings.js | 8 ++++++-- 9 files changed, 55 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 6662090..635c340 100644 --- a/README.md +++ b/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 diff --git a/build.js b/build.js index 3688e35..276396b 100644 --- a/build.js +++ b/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) } diff --git a/dist/wings.cjs b/dist/wings.cjs index 78cfff0..9e808c7 100644 --- a/dist/wings.cjs +++ b/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 } } diff --git a/dist/wings.mjs b/dist/wings.mjs index 2f81b50..f61d6a2 100644 --- a/dist/wings.mjs +++ b/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 } } diff --git a/index.html b/index.html index 75fbe1e..e2738d3 100644 --- a/index.html +++ b/index.html @@ -22,13 +22,13 @@

Wings

Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing)

- 1.1.0 + 1.1.1

Intallation

- 
$ npm i @b00tc4mp/wings --hello
+ 
$ npm i @b00tc4mp/wings

Usage (example)

@@ -135,6 +135,13 @@

Steps

// and that's it +

Demo project

+ +

+ Check out this repository 👀 +

+

More examples

diff --git a/package.json b/package.json index 9591df9..4ad738b 100644 --- a/package.json +++ b/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", diff --git a/scripts/counter-up.js b/scripts/counter-up.js index 0be892f..63d026e 100644 --- a/scripts/counter-up.js +++ b/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() } diff --git a/style.css b/style.css index a7fbb4e..fbc5821 100644 --- a/style.css +++ b/style.css @@ -14,6 +14,10 @@ html { height: 100% } +body { + padding: 1rem; +} + body, header, article, diff --git a/wings.js b/wings.js index 0336dd7..449bdec 100644 --- a/wings.js +++ b/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 } }