From 9a344770bde12d28e21190e8361a8024dba382f7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Feb 2026 09:22:07 +0000 Subject: [PATCH 1/2] Initial plan From 72f442cec67ee13779ecb8c63ec54b31160d673b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Feb 2026 09:29:14 +0000 Subject: [PATCH 2/2] Add index page, update README and workflows with all examples - Create app/index.html with overview, features, all 7 example links, installation, quick start code, and API overview - Update Gruntfile.js to copy index.html to dist/ - Update README.md with missing examples and documentation link - Update deploy-pr.yml PR comment with all example links - Add dist/index.html to .gitignore Co-authored-by: daedeloth <1168599+daedeloth@users.noreply.github.com> --- .github/workflows/deploy-pr.yml | 2 +- .gitignore | 3 +- Gruntfile.js | 7 + README.md | 12 +- app/index.html | 301 ++++++++++++++++++++++++++++++++ 5 files changed, 321 insertions(+), 4 deletions(-) create mode 100644 app/index.html diff --git a/.github/workflows/deploy-pr.yml b/.github/workflows/deploy-pr.yml index 5769543..6126ca6 100644 --- a/.github/workflows/deploy-pr.yml +++ b/.github/workflows/deploy-pr.yml @@ -50,7 +50,7 @@ jobs: const owner = context.repo.owner; const repo = context.repo.repo; const previewUrl = `https://${owner.toLowerCase()}.github.io/${repo}/pr/${prNumber}/examples/`; - const body = `๐Ÿ“ฆ PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)`; + const body = `๐Ÿ“ฆ PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)\n- [Background & Fill](${previewUrl}background.html)\n- [BigText](${previewUrl}bigtext.html)\n- [Emoji Text](${previewUrl}emoji.html)`; // Check if a preview comment already exists const comments = await github.rest.issues.listComments({ diff --git a/.gitignore b/.gitignore index dd67665..164b7c4 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ dist/scripts/vendor/ .idea node_modules/ dist/scripts/main.js -dist/examples \ No newline at end of file +dist/examples +dist/index.html \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 6d06e90..90b293f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -89,6 +89,13 @@ module.exports = function (grunt) { 'cwd': './app/', 'src': 'scripts/vendor/**/*', 'dest': 'dist/' + }, + + { + 'expand': true, + 'cwd': './app/', + 'src': 'index.html', + 'dest': 'dist/' } ] } diff --git a/README.md b/README.md index f82ef52..38fc557 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,16 @@ A GUI engine combining [EaselJS](https://createjs.com/easeljs) and [Backbone.js] ## Features - Navigatable views with keyboard and mouse support - UI controls: sliders, checkboxes, selectboxes, and buttons -- Scrollable containers -- Text rendering with auto-sizing +- Scrollable containers with list and float layouts +- Text rendering with auto-sizing and emoji support - Alpha mask support +- Asset loading and management - Built on top of AMD modules (RequireJS) +## Documentation + +Visit the [documentation and examples page](https://catlabinteractive.github.io/easelbone/) for a full overview of the library and live demos. + ## Installation ```bash npm install easelbone @@ -28,6 +33,9 @@ Live examples are hosted on GitHub Pages: - [Scrollable Areas](https://catlabinteractive.github.io/easelbone/examples/scroll.html) โ€” Scrollable container demo - [Float Layout](https://catlabinteractive.github.io/easelbone/examples/float.html) โ€” Float layout demo - [Alpha Mask](https://catlabinteractive.github.io/easelbone/examples/alphamask.html) โ€” Alpha mask demo +- [Background & Fill](https://catlabinteractive.github.io/easelbone/examples/background.html) โ€” Background fill and placeholder demo +- [BigText](https://catlabinteractive.github.io/easelbone/examples/bigtext.html) โ€” Auto-sizing text rendering demo +- [Emoji Text](https://catlabinteractive.github.io/easelbone/examples/emoji.html) โ€” Text rendering with emoji support Pull request previews are automatically deployed to `https://catlabinteractive.github.io/easelbone/pr//examples/`. diff --git a/app/index.html b/app/index.html new file mode 100644 index 0000000..65b86f5 --- /dev/null +++ b/app/index.html @@ -0,0 +1,301 @@ + + + + + + EaselBone โ€” GUI Engine for EaselJS + Backbone.js + + + +
+

EaselBone

+

A GUI engine combining EaselJS and Backbone.js for building interactive canvas-based user interfaces.

+
+ +
+
+

Features

+
+
+

Navigatable Views

+

Keyboard and mouse navigatable views built on Backbone.js, with support for multiple input users.

+
+
+

UI Controls

+

Sliders, checkboxes, selectboxes, and buttons with full keyboard navigation support.

+
+
+

Scrollable Containers

+

Scroll areas with list and float layout support, including programmatic scrolling and focus management.

+
+
+

Text Rendering

+

BigText auto-sizing text rendering with custom font support and emoji rendering via EmojiText.

+
+
+

Alpha Masks

+

Alpha mask support for creating complex visual effects on canvas elements.

+
+
+

Asset Loading

+

Built-in asset loader for managing spritesheets, images, and other resources with AMD/RequireJS modules.

+
+
+
+ +
+

Live Examples

+
+ +

Controls

+

Interactive sliders, checkboxes, selectboxes, and buttons with keyboard navigation.

+ + +

Scrollable Areas

+

Scrollable container with a list of items and programmatic focus scrolling.

+ + +

Float Layout

+

Float container layout for arranging elements in a flexible grid within a scroll area.

+ + +

Alpha Mask

+

Demonstrates alpha mask capabilities for creating visual effects on canvas.

+ + +

Background & Fill

+

Background fill and placeholder display objects for image rendering in containers.

+ + +

BigText

+

Auto-sizing text rendering with custom fonts that fills available container space.

+ + +

Emoji Text

+

Text rendering with inline emoji support using OpenMoji font rendering.

+ +
+
+ +
+

Installation

+

Install via npm:

+ 
npm install easelbone
+

Or with Bower:

+ 
bower install easelbone
+
+ +
+

Quick Start

+ 
require(['easelbone'], function (easelbone) {
+    // Create a root view attached to a DOM container
+    var rootView = new easelbone.Views.Root({
+        container: document.getElementById('container')
+    });
+
+    // Create a navigatable view
+    var MyView = easelbone.Views.Navigatable.extend({
+        initialize: function () {
+            this.initializeNavigatable({ orientation: 'vertical' });
+        },
+        render: function () {
+            // Add your content here
+        }
+    });
+
+    var view = new MyView();
+    rootView.setView(view);
+});
+
+ +
+

API Overview

+
+
+

Views

+

Views.Root โ€” Root stage container
+ Views.Navigatable โ€” Keyboard/mouse navigatable view
+ Views.Layer โ€” View layering
+ Views.LoadingView โ€” Loading state view

+
+
+

Controls

+

Controls.Slider โ€” Range slider
+ Controls.Checkbox โ€” Toggle checkbox
+ Controls.Button โ€” Clickable button
+ Controls.Selectbox โ€” Dropdown select
+ Controls.ScrollArea โ€” Scrollable area
+ Controls.List โ€” List container
+ Controls.FloatContainer โ€” Float layout

+
+
+

Display Objects

+

EaselJS.BigText โ€” Auto-sizing text
+ EaselJS.EmojiText โ€” Emoji-enabled text
+ EaselJS.Placeholder โ€” Placeholder container
+ EaselJS.Fill โ€” Fill display object
+ EaselJS.Background โ€” Background renderer

+
+
+
+
+ + + +