From cac964cf06051369933ee1b35f40c533890a1b69 Mon Sep 17 00:00:00 2001 From: Manuel Barzi Date: Tue, 26 Dec 2023 23:35:10 +0100 Subject: [PATCH] add build tool for cjs and mjs distributions; refactor rotating-cube demo; clean up files; adjust doc and html --- #project | 0 README.md | 4 +- build.js | 13 ++ dist/wings.cjs | 264 ++++++++++++++++++++++++++ dist/wings.mjs | 264 ++++++++++++++++++++++++++ favicon.ico | Bin 10358 -> 16958 bytes images/logo.svg | 15 +- index.html | 50 ++--- libs/tri.js | 219 ++++++++++----------- package.json | 24 ++- {demos => scripts}/draggable-body.js | 0 {demos => scripts}/mouth-frames.js | 0 {demos => scripts}/movable-box.js | 0 {demos => scripts}/reactive-box.js | 0 {demos => scripts}/rotating-cube.js | 10 +- {demos => scripts}/rotating-image.js | 0 {demos => scripts}/vertical-slider.js | 0 style.css | 49 +++-- wings.js | 9 +- 19 files changed, 716 insertions(+), 205 deletions(-) delete mode 100644 #project create mode 100644 build.js create mode 100644 dist/wings.cjs create mode 100644 dist/wings.mjs rename {demos => scripts}/draggable-body.js (100%) rename {demos => scripts}/mouth-frames.js (100%) rename {demos => scripts}/movable-box.js (100%) rename {demos => scripts}/reactive-box.js (100%) rename {demos => scripts}/rotating-cube.js (89%) rename {demos => scripts}/rotating-image.js (100%) rename {demos => scripts}/vertical-slider.js (100%) diff --git a/#project b/#project deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md index 8568a64..d4d88ec 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![Alt text](./images/logo.svg "WingsJS") +![Alt text](./images/logo.svg "Wings") ##### Usage: @@ -64,4 +64,4 @@ Add mouse reaction to it box.on('MouseClick', () => alert('Hello, World!')) ``` -See demos at https://manuelbarzi.github.io/wings-js \ No newline at end of file +See demos at https://b00tc4mp.github.io/wings \ No newline at end of file diff --git a/build.js b/build.js new file mode 100644 index 0000000..3688e35 --- /dev/null +++ b/build.js @@ -0,0 +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') + } catch (error) { + console.error(error) + } + })() \ No newline at end of file diff --git a/dist/wings.cjs b/dist/wings.cjs new file mode 100644 index 0000000..873e140 --- /dev/null +++ b/dist/wings.cjs @@ -0,0 +1,264 @@ +/** + * Wings JS + * + * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing). + * + * @author manuelbarzi + * @version 1.0.2 + */ +const Wings = (() => { + class Component { + constructor() { + this.x = this.y = this.width = this.height = 0 + this.mouse = {} + this.behaviors = [] + this.parent = null + this.children = [] + this.visible = true + + this.backgroundColor = 'Cyan' + this.borderColor = 'Magenta' + this.borderWidth = 0 + } + + get absoluteX() { return this.parent ? this.x + this.parent.x : this.x } + + get absoluteY() { return this.parent ? this.y + this.parent.y : this.y } + + add(component) { + if (!(component instanceof Component)) throw new TypeError(`${component} is not a Component`) + + this.children.push(component) + + component.parent = this + } + + on(event, behavior) { + if (typeof event !== 'string') throw new TypeError(`${event} is not a string`) + if (typeof behavior !== 'function') throw new TypeError(`${behavior} is not a function`); + + (this.behaviors[event] || (this.behaviors[event] = [])).push(behavior) + } + + fireEvent(event, value) { + const behaviors = this.behaviors[event] + + if (behaviors && behaviors.length > 0) + for (const behavior of behaviors) + behavior(value) + } + + isPointed(x, y) { + const { absoluteX, absoluteY } = this + + return absoluteX <= x && x <= absoluteX + this.width + && absoluteY <= y && y <= absoluteY + this.height + } + + mouseMove(event) { + if (this.visible) { + if (this.isPointed(event.x, event.y)) { + 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) + + if (this.children.length > 0) + for (const child of this.children) + child.mouseMove(event) + } + } + + mouseDown(event) { + if (this.visible) { + if (this.isPointed(event.x, event.y)) { + this.mouse.pressed = true + this.fireEvent('MouseDown', event) + } + + if (this.children.length > 0) + for (const child of this.children) + child.mouseDown(event) + } + } + + mouseUp(event) { + this.releaseMouse() + + if (this.visible) { + if (this.isPointed(event.x, event.y)) + this.fireEvent('MouseUp', event) + + if (this.children.length > 0) + for (const child of this.children) + child.mouseUp(event) + } + } + + releaseMouse() { + this.mouse.pressed = false + this.mouse.dragging = false + + if (this.children.length > 0) + for (const child of this.children) + child.releaseMouse() + } + + mouseClick(event) { + if (this.visible) { + 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) + } + } + + keyDown(event) { + if (this.visible) { + this.fireEvent('KeyDown', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyDown(event) + } + } + + keyUp(event) { + if (this.visible) { + this.fireEvent('KeyUp', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyUp(event) + } + } + + keyPress(event) { + if (this.visible) { + this.fireEvent('KeyPress', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyPress(event) + } + } + + triggerRender(context) { + context.translate(this.x, this.y) + + this.render(context) + + if (this.children.length > 0) + for (const child of this.children) + child.triggerRender(context) + + context.translate(-this.x, -this.y) + } + + render(context) { + context.beginPath() + context.rect(0, 0, this.width, this.height) + context.fillStyle = this.backgroundColor + context.fill() + + if (this.borderWidth) { + context.lineWidth = this.borderWidth + context.strokeStyle = this.borderColor + context.stroke() + } + } + } + + class MouseEvent { + constructor(element, event) { + const rect = element.getBoundingClientRect() + + this.x = event.clientX - rect.left + this.y = event.clientY - rect.top + } + } + + class KeyEvent { + constructor(event) { + this.key = event.which || event.keyCode + } + } + + class View extends Component { + constructor(canvas) { + super() + + this.width = canvas.width + this.height = canvas.height + + this.context = canvas.getContext('2d') + + window.requestAnimFrame = (function () { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || function (callback) { + window.setTimeout(callback, 1000 / 600) + } + })() + + window.addEventListener('mousemove', event => { + this.mouseMove(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('mousedown', event => { + this.mouseDown(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('mouseup', event => { + this.mouseUp(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('click', event => { + this.mouseClick(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('keydown', event => { + this.keyDown(new KeyEvent(event)) + this.refresh() + }) + + window.addEventListener('keyup', event => { + this.keyUp(new KeyEvent(event)) + this.refresh() + }) + + window.addEventListener('keypress', event => { + this.keyPress(new KeyEvent(event)) + this.refresh() + }) + + setTimeout(() => { + this.refresh() + }, 100) + } + + refresh() { + window.requestAnimFrame(() => { + this.context.clearRect(0, 0, self.width, self.height) + super.triggerRender(this.context) + }) + } + } + + return { + Component, + View + } +})() + +module.exports = Wings \ No newline at end of file diff --git a/dist/wings.mjs b/dist/wings.mjs new file mode 100644 index 0000000..b87318a --- /dev/null +++ b/dist/wings.mjs @@ -0,0 +1,264 @@ +/** + * Wings JS + * + * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing). + * + * @author manuelbarzi + * @version 1.0.2 + */ +const Wings = (() => { + class Component { + constructor() { + this.x = this.y = this.width = this.height = 0 + this.mouse = {} + this.behaviors = [] + this.parent = null + this.children = [] + this.visible = true + + this.backgroundColor = 'Cyan' + this.borderColor = 'Magenta' + this.borderWidth = 0 + } + + get absoluteX() { return this.parent ? this.x + this.parent.x : this.x } + + get absoluteY() { return this.parent ? this.y + this.parent.y : this.y } + + add(component) { + if (!(component instanceof Component)) throw new TypeError(`${component} is not a Component`) + + this.children.push(component) + + component.parent = this + } + + on(event, behavior) { + if (typeof event !== 'string') throw new TypeError(`${event} is not a string`) + if (typeof behavior !== 'function') throw new TypeError(`${behavior} is not a function`); + + (this.behaviors[event] || (this.behaviors[event] = [])).push(behavior) + } + + fireEvent(event, value) { + const behaviors = this.behaviors[event] + + if (behaviors && behaviors.length > 0) + for (const behavior of behaviors) + behavior(value) + } + + isPointed(x, y) { + const { absoluteX, absoluteY } = this + + return absoluteX <= x && x <= absoluteX + this.width + && absoluteY <= y && y <= absoluteY + this.height + } + + mouseMove(event) { + if (this.visible) { + if (this.isPointed(event.x, event.y)) { + 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) + + if (this.children.length > 0) + for (const child of this.children) + child.mouseMove(event) + } + } + + mouseDown(event) { + if (this.visible) { + if (this.isPointed(event.x, event.y)) { + this.mouse.pressed = true + this.fireEvent('MouseDown', event) + } + + if (this.children.length > 0) + for (const child of this.children) + child.mouseDown(event) + } + } + + mouseUp(event) { + this.releaseMouse() + + if (this.visible) { + if (this.isPointed(event.x, event.y)) + this.fireEvent('MouseUp', event) + + if (this.children.length > 0) + for (const child of this.children) + child.mouseUp(event) + } + } + + releaseMouse() { + this.mouse.pressed = false + this.mouse.dragging = false + + if (this.children.length > 0) + for (const child of this.children) + child.releaseMouse() + } + + mouseClick(event) { + if (this.visible) { + 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) + } + } + + keyDown(event) { + if (this.visible) { + this.fireEvent('KeyDown', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyDown(event) + } + } + + keyUp(event) { + if (this.visible) { + this.fireEvent('KeyUp', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyUp(event) + } + } + + keyPress(event) { + if (this.visible) { + this.fireEvent('KeyPress', event) + + if (this.children.length > 0) + for (const child of this.children) + child.keyPress(event) + } + } + + triggerRender(context) { + context.translate(this.x, this.y) + + this.render(context) + + if (this.children.length > 0) + for (const child of this.children) + child.triggerRender(context) + + context.translate(-this.x, -this.y) + } + + render(context) { + context.beginPath() + context.rect(0, 0, this.width, this.height) + context.fillStyle = this.backgroundColor + context.fill() + + if (this.borderWidth) { + context.lineWidth = this.borderWidth + context.strokeStyle = this.borderColor + context.stroke() + } + } + } + + class MouseEvent { + constructor(element, event) { + const rect = element.getBoundingClientRect() + + this.x = event.clientX - rect.left + this.y = event.clientY - rect.top + } + } + + class KeyEvent { + constructor(event) { + this.key = event.which || event.keyCode + } + } + + class View extends Component { + constructor(canvas) { + super() + + this.width = canvas.width + this.height = canvas.height + + this.context = canvas.getContext('2d') + + window.requestAnimFrame = (function () { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || function (callback) { + window.setTimeout(callback, 1000 / 600) + } + })() + + window.addEventListener('mousemove', event => { + this.mouseMove(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('mousedown', event => { + this.mouseDown(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('mouseup', event => { + this.mouseUp(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('click', event => { + this.mouseClick(new MouseEvent(canvas, event)) + this.refresh() + }) + + window.addEventListener('keydown', event => { + this.keyDown(new KeyEvent(event)) + this.refresh() + }) + + window.addEventListener('keyup', event => { + this.keyUp(new KeyEvent(event)) + this.refresh() + }) + + window.addEventListener('keypress', event => { + this.keyPress(new KeyEvent(event)) + this.refresh() + }) + + setTimeout(() => { + this.refresh() + }, 100) + } + + refresh() { + window.requestAnimFrame(() => { + this.context.clearRect(0, 0, self.width, self.height) + super.triggerRender(this.context) + }) + } + } + + return { + Component, + View + } +})() + +export default Wings \ No newline at end of file diff --git a/favicon.ico b/favicon.ico index 814a6d4a500d7ddc80a9765c3cf1375b7e502c78..60f098786709a274e90fc1f1044777cbcec873f1 100644 GIT binary patch delta 393 zcmewsu&;$tm4Sf~2pt?iv;u>M69a=70|SEw5Cer68h{umJ~>hC?BoKqeUxF<9UHs0 cs7=mPJ4%T;69XhO{?iF;wo|uYOrW)80Lt_c@c;k- delta 71 zcmdnj!uTz~gn@w(2p!Zxv;sqd1_Of_0|Nt)VsHRrKOhE)g8@*@b7l~pXc)G+i+79K J=4B2Ri~wTv3&sEd diff --git a/images/logo.svg b/images/logo.svg index 352f0bf..e8322f8 100644 --- a/images/logo.svg +++ b/images/logo.svg @@ -1,6 +1,6 @@ - + @@ -10,7 +10,7 @@ width="514px" height="142px" style="background-color: transparent"> <_rect x="60" y="15" width="10" height="130" fill="cyan" /> - + @@ -38,14 +38,5 @@ width="514px" height="142px" style="background-color: transparent"> - - - - \ No newline at end of file diff --git a/index.html b/index.html index dff2419..e6fba3c 100644 --- a/index.html +++ b/index.html @@ -4,20 +4,21 @@ - Component-Oriented JavaScript UI framework for Canvas - Wings JS + Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing) +
- + -

Wings JS

+

Wings

-

Component-Oriented JavaScript UI framework for Canvas

+

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

-

v1.0.1

+ 1.0.2

Demos

@@ -30,7 +31,7 @@

Draggable Body

-

code

+

code

@@ -41,7 +42,7 @@

Rotating Image

-

code

+

code

@@ -52,7 +53,7 @@

Reactive Box

-

code

+

code

@@ -63,7 +64,7 @@

Vertical Slider

-

code

+

code

@@ -74,7 +75,7 @@

Movable Box

-

code

+

code

@@ -85,7 +86,7 @@

Rotating Cube

-

code

+

code

@@ -96,27 +97,28 @@

Mouth Frames

-

code

+

code

- - - - - - - + + + + + + + \ No newline at end of file diff --git a/libs/tri.js b/libs/tri.js index 9227def..ad28ede 100644 --- a/libs/tri.js +++ b/libs/tri.js @@ -5,149 +5,122 @@ * * @author manuelbarzi */ -var Tri; -(function() { +const Tri = (() => { + class Point { + constructor(x, y, z) { + this.x = x || 0 + this.y = y || 0 + this.z = z || 0 + } + } - Tri = {}; + function rad(deg) { + return Math.PI * deg / 180 + } - Tri.Point = function Point(x, y, z) { - this.x = x || 0; - this.y = y || 0; - this.z = z || 0; - }; + function rotation(deg) { + return { + sin: Math.sin(rad(deg)), + cos: Math.cos(rad(deg)) + } + } + + function rotateX(r, p) { + var y = p.y, + z = p.z + p.y = y * r.cos - z * r.sin + p.z = y * r.sin + z * r.cos + } - Tri.Point.prototype = { + function rotateY(r, p) { + var x = p.x, + z = p.z + p.x = x * r.cos + z * r.sin + p.z = -x * r.sin + z * r.cos + } - toString: function() { - return JSON.stringify(this); + function rotateZ(r, p) { + var x = p.x, + y = p.y + p.x = x * r.cos - y * r.sin + p.y = x * r.sin + y * r.cos + } + + const point = { + rotateX(deg, p) { + rotateX(rotation(deg), p) }, - rotX: function(deg) { - Tri.rotX(deg, this); + rotateY(deg, p) { + rotateY(rotation(deg), p) }, - rotY: function(deg) { - Tri.rotY(deg, this); + rotateZ(deg, p) { + rotateZ(rotation(deg), p) }, - rotZ: function(deg) { - Tri.rotZ(deg, this); + translateX(dx, p) { + p.x += dx }, - transX: function(dx) { - Tri.transX(dx, this); + translateY(dy, p) { + p.y += dy }, - transY: function(dy) { - Tri.transY(dy, this); + translateZ(dz, p) { + p.z += dz }, - transZ: function(dz) { - Tri.transZ(dz, this); + translate(dx, dy, dz, p) { + this.translateX(dx, p) + this.translateY(dy, p) + this.translateZ(dz, p) } + } - }; + const points = { + rotateX(deg, points) { + var rot = rotation(deg) + for (var i in points) + rotateX(rot, points[i]) + }, - Tri._rad = function(deg) { - return Math.PI * deg / 180; - }; + rotateY(deg, points) { + var rot = rotation(deg) + for (var i in points) + rotateY(rot, points[i]) + }, - Tri._rot = function(deg) { - return { - sin: Math.sin(Tri._rad(deg)), - cos: Math.cos(Tri._rad(deg)) - }; - }; + rotateZ(deg, points) { + var rot = rotation(deg) + for (var i in points) + rotateZ(rot, points[i]) + }, - Tri._rotX = function(r, p) { - var y = p.y, - z = p.z; - p.y = y * r.cos - z * r.sin; - p.z = y * r.sin + z * r.cos; - }; + translateX(dx, points) { + for (var i in points) + point.translateX(dx, points[i]) + }, - Tri._rotY = function(r, p) { - var x = p.x, - z = p.z; - p.x = x * r.cos + z * r.sin; - p.z = -x * r.sin + z * r.cos; - }; + translateY(dy, points) { + for (var i in points) + point.translateY(dy, points[i]) + }, - Tri._rotZ = function(r, p) { - var x = p.x, - y = p.y; - p.x = x * r.cos - y * r.sin; - p.y = x * r.sin + y * r.cos; - }; - - Tri.rotX = function(deg, p) { - Tri._rotX(Tri._rot(deg), p); - }; - - Tri.rotY = function(deg, p) { - Tri._rotY(Tri._rot(deg), p); - }; - - Tri.rotZ = function(deg, p) { - Tri._rotZ(Tri._rot(deg), p); - }; - - Tri.transX = function(dx, p) { - p.x += dx; - }; - - Tri.transY = function(dy, p) { - p.y += dy; - }; - - Tri.transZ = function(dz, p) { - p.z += dz; - }; - - Tri.trans = function(dx, dy, dz, p) { - Tri.transX(dx, p); - Tri.transY(dy, p); - Tri.transZ(dz, p); - }; - - // arrays - - Tri.rotArrayX = function(deg, arr) { - var rot = Tri._rot(deg); - for (var i in arr) - Tri._rotX(rot, arr[i]); - }; - - Tri.rotArrayY = function(deg, arr) { - var rot = Tri._rot(deg); - for (var i in arr) - Tri._rotY(rot, arr[i]); - }; - - Tri.rotArrayZ = function(deg, arr) { - var rot = Tri._rot(deg); - for (var i in arr) - Tri._rotZ(rot, arr[i]); - }; - - Tri.transArrayX = function(dx, arr) { - for (var i in arr) - Tri.transX(dx, arr[i]); - }; - - Tri.transArrayY = function(dy, arr) { - for (var i in arr) - Tri.transY(dy, arr[i]); - }; - - Tri.transArrayZ = function(dz, arr) { - for (var i in arr) - Tri.transZ(dz, arr[i]); - }; - - Tri.transArray = function(dx, dy, dz, arr) { - for (var i in arr) - Tri.trans(dx, dy, dz, arr[i]); - }; - -})(); + translateZ(dz, points) { + for (var i in points) + point.translateZ(dz, points[i]) + }, + + translate(dx, dy, dz, points) { + for (var i in points) + point.translate(dx, dy, dz, points[i]) + } + } + + return { + Point, + point, + points, + } +})() diff --git a/package.json b/package.json index ef421cd..7704580 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,25 @@ { - "name": "wings-js", + "name": "wings", "shortname": "wings", - "title": "WingsJS", - "description": "Component-Oriented JavaScript UI framework for Canvas", - "version": "1.0.1", - "homepage": "https://manuelbarzi.github.io/wings-js", + "title": "Wings", + "description": "Object-oriented Component-based UI JavaScript library for HTML Canvas (inspired by Java Swing).", + "version": "1.0.2", + "homepage": "https://b00tc4mp.github.io/wings", "repository": { "type": "git", - "url": "https://github.com/manuelbarzi/wings-js" + "url": "https://github.com/b00tc4mp/wings" }, "author": "manuelbarzi", "license": "MIT", - "main": "wings.js" + "main": "wings.js", + "type": "module", + "exports": { + ".": { + "import": "./dist/wings.mjs", + "require": "./dist/wings.cjs" + } + }, + "scripts": { + "build": "node build" + } } \ No newline at end of file diff --git a/demos/draggable-body.js b/scripts/draggable-body.js similarity index 100% rename from demos/draggable-body.js rename to scripts/draggable-body.js diff --git a/demos/mouth-frames.js b/scripts/mouth-frames.js similarity index 100% rename from demos/mouth-frames.js rename to scripts/mouth-frames.js diff --git a/demos/movable-box.js b/scripts/movable-box.js similarity index 100% rename from demos/movable-box.js rename to scripts/movable-box.js diff --git a/demos/reactive-box.js b/scripts/reactive-box.js similarity index 100% rename from demos/reactive-box.js rename to scripts/reactive-box.js diff --git a/demos/rotating-cube.js b/scripts/rotating-cube.js similarity index 89% rename from demos/rotating-cube.js rename to scripts/rotating-cube.js index ded761e..aa4d822 100644 --- a/demos/rotating-cube.js +++ b/scripts/rotating-cube.js @@ -24,7 +24,7 @@ pts.push(new Tri.Point(50, 50, 0)) pts.push(new Tri.Point(50, 0, 0)) - Tri.transArray(-25, -25, -25, pts) + Tri.points.translate(-25, -25, -25, pts) pts = cube.points[1] @@ -33,14 +33,14 @@ pts.push(new Tri.Point(50, 50, 50)) pts.push(new Tri.Point(50, 0, 50)) - Tri.transArray(-25, -25, -25, pts) + Tri.points.translate(-25, -25, -25, pts) setInterval(function () { for (const i in cube.points) { pts = cube.points[i] - Tri.rotArrayX(1, pts) - Tri.rotArrayY(-1, pts) - Tri.rotArrayZ(1, pts) + Tri.points.rotateX(1, pts) + Tri.points.rotateY(-1, pts) + Tri.points.rotateZ(1, pts) } view.refresh() diff --git a/demos/rotating-image.js b/scripts/rotating-image.js similarity index 100% rename from demos/rotating-image.js rename to scripts/rotating-image.js diff --git a/demos/vertical-slider.js b/scripts/vertical-slider.js similarity index 100% rename from demos/vertical-slider.js rename to scripts/vertical-slider.js diff --git a/style.css b/style.css index 617befc..ca835f5 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,8 @@ +:root { + --width: 300px; + --max-width: 500px; +} + * { font-family: 'Courier New', Courier, monospace; } @@ -6,25 +11,19 @@ html { height: 100% } -body, header, article, footer { +body, +header, +article, +footer { display: flex; flex-direction: column; justify-content: center; align-items: center; } -body { - align-items: center; - background-color: white; - padding: 1rem; -} - h1 { - display: none; -} - -h2, h3, p { - color: gray + font-size: .5rem; + color: transparent; } h2 { @@ -35,27 +34,25 @@ h3 { font-size: 1.2rem; } -p { - text-align: justify; +h1, +h2, +h3 { + margin-bottom: 0; } -header, footer { - width: 50%; - min-width: 300px; - max-width: 550px; +p { + text-align: center; + margin: .5rem 0; } -header>img { - width: 100%; - min-width: 300px; +header, +footer { + min-width: var(--width); + max-width: var(--max-width); } article { - width: 300px; -} - -canvas { - border: 0; + width: var(--width); } .icon { diff --git a/wings.js b/wings.js index 21b40a8..aaf96ae 100644 --- a/wings.js +++ b/wings.js @@ -1,10 +1,10 @@ /** * Wings JS * - * Component-Oriented JavaScript UI framework for Canvas + * An Object-Oriented Component-based UI Library for Canvas built in JavaScript (inspired by Java Swing). * * @author manuelbarzi - * @version 1.0.1 + * @version 1.0.2 */ const Wings = (() => { class Component { @@ -259,7 +259,4 @@ const Wings = (() => { Component, View } -})() - -if (typeof module !== 'undefined') - module.exports = Wings \ No newline at end of file +})() \ No newline at end of file