├── .github
    └── workflows
    │   └── deploy-to-gh-pages.yml
├── .gitignore
├── 3rdparty
    ├── scrollbars.css
    └── scrollbars.js
├── DEVNOTES.md
├── ImHUI.css
├── LICENSE.md
├── README.md
├── TODO.md
├── index.css
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── ImHUI.ts
    ├── background.ts
    ├── button.ts
    ├── canvas2D.ts
    ├── child.ts
    ├── colorEdit.ts
    ├── colors.ts
    ├── context.ts
    ├── core.ts
    ├── elements.ts
    ├── globalState.ts
    ├── inputText.ts
    ├── main.ts
    ├── menu.ts
    ├── plotLines.ts
    ├── sliderFloat.ts
    ├── text.ts
    ├── types
    │   └── ResizeObserver.d.ts
    ├── utils.ts
    ├── valueDrag.ts
    └── window.ts
└── tsconfig.json


/.github/workflows/deploy-to-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   pull_request:
 7 | jobs:
 8 |   build-and-deploy:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - name: Checkout 🍔🍟🥤
12 |         uses: actions/checkout@v2.3.1
13 |         with:
14 |           persist-credentials: false
15 | 
16 |       - name: Use Node.js 😂
17 |         uses: actions/setup-node@v1
18 |         with:
19 |           node-version: '14.x'
20 | 
21 |       - name: Install and Build 🏭
22 |         run: |
23 |           npm i
24 |           npm run build-ci
25 | 
26 |       - name: Deploy 📦
27 |         if: ${{ github.event_name == 'push' }}
28 |         uses: JamesIves/github-pages-deploy-action@3.6.2
29 |         with:
30 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
31 |           BRANCH: gh-pages
32 |           FOLDER: build
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | 


--------------------------------------------------------------------------------
/3rdparty/scrollbars.css:
--------------------------------------------------------------------------------
 1 | /* Variables */
 2 | :root {
 3 |   --scrollbar-size: .375rem;
 4 |   --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
 5 |   --scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
 6 |   --scrollbar-track-color: transparent;
 7 |   --scrollbar-color: rgba(0,0,0,.2);
 8 |   --scrollbar-color-hover: rgba(0,0,0,.3);
 9 |   --scrollbar-color-active: rgb(0,0,0);
10 | }
11 | 
12 | /* Use .layout-scrollbar-obtrusive to only use overflow if scrollbars don’t overlay */
13 | .scrollbar-test,
14 | .layout-cell {
15 |   overscroll-behavior: contain;
16 |   overflow-y: auto;
17 |   -webkit-overflow-scrolling: touch;
18 |   -ms-overflow-style: -ms-autohiding-scrollbar;
19 |   scrollbar-width: var(--scrollbar-ff-width);
20 | }
21 | 
22 | /* This class controls what elements have the new fancy scrollbar CSS */
23 | .layout-scrollbar {
24 |   scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
25 | }
26 | /* Only apply height/width to ::-webkit-scrollbar if is obtrusive */
27 | .layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {
28 |   height: var(--scrollbar-size);
29 |   width: var(--scrollbar-size);
30 | }
31 | .layout-scrollbar::-webkit-scrollbar-track {
32 |   background-color: var(--scrollbar-track-color);
33 | }
34 | .layout-scrollbar::-webkit-scrollbar-thumb {
35 |   background-color: var(--scrollbar-color);
36 |   border-radius: 3px;
37 | }
38 | .layout-scrollbar::-webkit-scrollbar-thumb:hover {
39 |   background-color: var(--scrollbar-color-hover);
40 | }
41 | .layout-scrollbar::-webkit-scrollbar-thumb:active {
42 |   background-color: var(--scrollbar-color-active);
43 | }
44 | .scrollbar-test::-webkit-scrollbar-thumb:vertical,
45 | .layout-scrollbar::-webkit-scrollbar-thumb:vertical {
46 |   min-height: var(--scrollbar-minlength);
47 | }
48 | .scrollbar-test::-webkit-scrollbar-thumb:horizontal,
49 | .layout-scrollbar::-webkit-scrollbar-thumb:horizontal {
50 |   min-width: var(--scrollbar-minlength);
51 | }
52 | 
53 | 
54 | @media (prefers-color-scheme: dark) {
55 |   :root {
56 |     --scrollbar-color:#555;
57 |     --scrollbar-color-hover: #555;
58 |     --scrollbar-color-active: #555;
59 |   }
60 | }
61 | 
62 | 


--------------------------------------------------------------------------------
/3rdparty/scrollbars.js:
--------------------------------------------------------------------------------
 1 | //import './scrollbars.css';
 2 | 
 3 | /*
 4 |  * Scrollbar Width Test
 5 |  * Adds `layout-scrollbar-obtrusive` class to body if scrollbars use up screen real estate
 6 |  */
 7 | const parent = document.createElement("div");
 8 | parent.setAttribute("style", "width:30px;height:30px;");
 9 | parent.classList.add('scrollbar-test');
10 | 
11 | const child = document.createElement("div");
12 | child.setAttribute("style", "width:100%;height:40px");
13 | parent.appendChild(child);
14 | document.body.appendChild(parent);
15 | 
16 | // Measure the child element, if it is not
17 | // 30px wide the scrollbars are obtrusive.
18 | const scrollbarWidth = 30 - parent.firstChild.clientWidth;
19 | if(scrollbarWidth) {
20 |   document.body.classList.add("layout-scrollbar-obtrusive");
21 | }
22 | 
23 | document.body.removeChild(parent);


--------------------------------------------------------------------------------
/DEVNOTES.md:
--------------------------------------------------------------------------------
  1 | # Development Notes
  2 | 
  3 | ## How it works ATM
  4 | 
  5 | There is a hierarchy of `Node` (an internal type).
  6 | While rendering, we get existing nodes in the order they
  7 | were rendering last time. We compare the node we got to
  8 | the type of node we want. In other words, if we have top level
  9 | code like
 10 | 
 11 | ```js
 12 | function renderUI() {
 13 |   text('Editor');
 14 |   speed = sliderFloat('speed', speed);
 15 |   title = inputText('title', title);
 16 | }
 17 | ```
 18 | 
 19 | Then 3 `Node`s are generated, a `TextNode`, a `SliderFloatNode`, 
 20 | and a `InputTextNode` in that order
 21 | 
 22 | The next time through when we see `text('Editor')` we'll get
 23 | the first `Node` and check if it's a `TextNode`. If it is we'll
 24 | use it. It should function for any text and any things that need
 25 | to updated, should be updated in its `update` method.
 26 | 
 27 | If the node is node `TextNode` then it's discarded.
 28 | 
 29 | This probably means if you change a node near the top of a list
 30 | in the hierarchy then everything after it is going to be discarded
 31 | and regenerated. 
 32 | 
 33 | ATM that's fine just to get things working I think. In the future
 34 | we could consider a cache of unused nodes by type and/or some other
 35 | ways of optimizing churn.
 36 | 
 37 | ## We need a way to know if a node can be reused
 38 | 
 39 | Guidelines
 40 | 
 41 | *  If you allow the user to set `className` then you're update function
 42 |    must set the className with `this.setClassName(className)`
 43 | 
 44 | *  Every part of an element you let a user change you have to check
 45 |    in `update` if it it's changed
 46 | 
 47 | *  If you allow the user to pass the element type then we need a way
 48 |    to pass that type all the way into `getExistingNodeOrRemove`
 49 |    so that it can check if an existing node of type X is covering
 50 |    an element if the required element type
 51 | 
 52 |    One idea. We could generate types by element type? Unfortunately
 53 |    that would not be typescript friendly?
 54 | 
 55 | ```js
 56 | class TypeTextNode extends Node {
 57 |   #text: string;
 58 | 
 59 |   constructor(type: string) {
 60 |     // FIX! You can't pass the type OR we need to fix the code
 61 |     // that gets an old node because it checks by JS class instanceof
 62 |     // not by element type
 63 |     super(type);
 64 |   }
 65 |   update(str: string) {
 66 |     if (this.#text !== str) {
 67 |       this.#text = str;
 68 |       this.elem.textContent = str;
 69 |     }
 70 |   }
 71 | }
 72 | 
 73 | const elementTypeToConstructor = new Map();
 74 | 
 75 | /**
 76 |  * Makes one class inherit from another.
 77 |  * @param {!Object} subClass Class that wants to inherit.
 78 |  * @param {!Object} superClass Class to inherit from.
 79 |  */
 80 | function inherit(subClass, superClass) {
 81 |   /**
 82 |    * TmpClass.
 83 |    * @ignore
 84 |    * @constructor
 85 |    */
 86 |   const TmpClass = function() { };
 87 |   TmpClass.prototype = superClass.prototype;
 88 |   subClass.prototype = new TmpClass();
 89 | };
 90 | 
 91 | export function typeText(type: string, str: string) {
 92 |   let ctor = elementTypeToConstructor(type);
 93 |   if (!ctor) {
 94 |     ctor = function() {
 95 |       TextTypeNode.call(type);
 96 |     }
 97 |     inherit(ctor, TextTypeNode);
 98 |     elementTypeToConstructor.set(type, ctor)
 99 |   }
100 | 
101 |   // this is the iffy part VVVVV
102 |   const node = context.getExistingNodeOrRemove<TypeTextNode>(ctor, type, str);
103 |   node.update(str);
104 | }
105 | ```
106 | 
107 | ## Decide how to handle stateful stuff
108 | 
109 | Example: A window has the state of position and size.
110 | We really need to expose that to the use. Suggestion
111 | 1 is by ID. (I think ImGUI does it that way). Suggestion
112 | 2 is have the user provide it.
113 | 
114 | Advantage to ID is it's opaque. What's saved is not up to the
115 | user. Advantage to exposing it is user can set and save it.
116 | 
117 | For now going to try exposing


--------------------------------------------------------------------------------
/ImHUI.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --main-bg-color: #eee;
  3 |   --main-fg-color: #000;
  4 |   --accent-bg-color: #CCC;
  5 |   --outline-color: #888;
  6 |   --button-bg-color: #48F;
  7 |   --window-bg-color: #fff;
  8 |   --hover-bg-color: #F00;
  9 |   --focus-bg-color: #FF9;
 10 | 
 11 |   --title-bg-color: #CCC;
 12 |   --link-color: #36C;
 13 |   --code-area-bg-color: #CCC;
 14 |   --un-run-bg-color: #8AF;
 15 |   --aborted-bg-color: #DDD;
 16 |   --error-fg-color: darkred;
 17 |   --warn-fg-color: brown;
 18 |   --editor-bg-color: #fff;
 19 | }
 20 | 
 21 | @media (prefers-color-scheme: dark) {
 22 |   :root {
 23 |     --main-bg-color: #444;
 24 |     --main-fg-color: #fff;
 25 |     --accent-bg-color: #222;
 26 |     --outline-color: #888;
 27 |     --button-bg-color: #05f;
 28 |     --window-bg-color: #444;
 29 |     --hover-bg-color: #F00;
 30 |     --focus-bg-color: #000;
 31 | 
 32 |     --title-bg-color: #222;
 33 |     --link-color: #6CF;
 34 |     --code-area-bg-color: #555;
 35 |     --un-run-bg-color: blue;
 36 |     --aborted-bg-color: #000;
 37 |     --error-fg-color: red;
 38 |     --warn-fg-color: yellow;
 39 |     --editor-bg-color: #263238;
 40 |   }
 41 | }
 42 | 
 43 | #root, html, body {
 44 |   width: 100%;
 45 |   height: 100%;
 46 |   margin: 0;
 47 | }
 48 | #root {
 49 |   overflow: auto;
 50 |   padding: 5px;
 51 | }
 52 | html {
 53 |   box-sizing: border-box;
 54 |   background-color: var(--main-bg-color);
 55 |   color: var(--main-fg-color);
 56 | }
 57 | html, input, button {
 58 |   font-family: monospace;
 59 | }
 60 | button {
 61 |   background-color: var(--button-bg-color);
 62 |   color: var(--main-fg-color);
 63 |   border: 1px solid var(--outline-color);
 64 | }
 65 | button:hover {
 66 |   background-color: var(--hover-bg-color);
 67 | }
 68 | input {
 69 |   background-color: var(--accent-bg-color);
 70 |   color: var(--main-fg-color);
 71 |   border: none;
 72 | }
 73 | input:focus {
 74 |   background: var(--focus-bg-color);
 75 | }
 76 | 
 77 | *, *:before, *:after {
 78 |   box-sizing: inherit;
 79 | }
 80 | canvas {
 81 |   display: block;
 82 | }
 83 | 
 84 | .fill-space {
 85 |   width: 100%;
 86 |   height: 100%;
 87 | }
 88 | 
 89 | .value-drag {
 90 |   cursor: pointer;
 91 |   user-select: none;
 92 |   margin-right: 3px;
 93 |   padding-left: 3px;
 94 |   padding-right: 3px;
 95 |   background-color: var(--accent-bg-color);
 96 | }
 97 | .child {
 98 |   max-height: 10em;
 99 |   overflow: auto;
100 |   border: 1px solid var(--outline-color);
101 |   padding: 2px;
102 | }
103 | 
104 | .window {
105 |   position: absolute;
106 |   box-shadow: 5px 5px 5px black;
107 |   border: 1px solid black;
108 |   resize: both;
109 |   padding: 3px;
110 |   overflow: auto;
111 |   background-color: var(--window-bg-color);
112 |   opacity: 0.8;
113 | }
114 | .window>details>summary {
115 |   margin: 3px;
116 |   user-select: none;
117 |   cursor: pointer;
118 | }
119 | /* --------------------------- */
120 | .form-line {
121 |   display: flex;
122 |   position: relative;
123 |   margin: 1px;
124 | }
125 | .form-line>*:nth-child(1) {
126 |   flex: 1 1 auto;
127 | }
128 | .form-line>*:nth-child(2) {
129 |   flex: 0 0 9em;
130 | }
131 | /* --------------------------- */
132 | .plot-lines {
133 |   height: 2em;
134 | }
135 | .plot-lines canvas {
136 |   background: var(--accent-bg-color);
137 | }
138 | /* --------------------------- */
139 | .color-edit-4-sub {
140 |   display: flex;
141 | }
142 | .color-edit-4-sub>div:nth-child(1),
143 | .color-edit-4-sub>div:nth-child(2),
144 | .color-edit-4-sub>div:nth-child(3),
145 | .color-edit-4-sub>div:nth-child(4) {
146 |   flex: 1 1 auto;
147 |   text-align: center;
148 | }
149 | 
150 | .color-button {
151 |   width: 1em;
152 |   height: 1em;
153 |   border: 1px solid black;
154 | }
155 | /* --------------------------- */
156 | /* wrapper for slider and value */
157 | .slider-value {
158 |   position: relative;
159 | }
160 | .slider-value>div {
161 |   position: absolute;
162 |   left: 0;
163 |   top: 0;
164 |   text-align: center;
165 |   width: 100%;
166 |   user-select: none;
167 |   pointer-events: none;
168 | }
169 | .slider-value>input {
170 |   position: absolute;
171 |   left: 0;
172 |   top: 0;
173 |   width: 100%;
174 |   -webkit-appearance: none;
175 |   margin: 0;
176 |   height: 1.1em;
177 |   background: var(--accent-bg-color);
178 |   outline: none;
179 | }
180 | .slider-value>input::-webkit-slider-thumb {
181 |   -webkit-appearance: none;
182 |   height: 0.9em;
183 |   width: 1em;
184 |   background: var(--button-bg-color);
185 |   cursor: pointer;
186 | }
187 | .slider-value>input::-webkit-slider-thumb:hover {
188 |   background: var(--hover-bg-color);
189 | }


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Gregg Tavares
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ImHUI (**I**mmediate **M**ode **H**TML **U**ser **I**nterface)
  2 | 
  3 | [Live Demo](https://greggman.github.io/ImHUI)
  4 | 
  5 | **WAT?** I'm a fan (and a sponsor) of [Dear ImGUI](https://github.com/ocornut/imgui). I've written a couple of articles on it including [this one](https://games.greggman.com/game/imgui-future/) and [this one](https://games.greggman.com/game/rethinking-ui-apis/)
  6 | 
  7 | Lately I thought, I wonder what it would be like to try to make an
  8 | HTML library that followed a similar style of API.
  9 | 
 10 | NOTE: This is not Dear ImGUI running in JavaScript. For that see
 11 | [this repo](https://github.com/flyover/imgui-js). The difference
 12 | is most ImGUI libraries render their own graphics. More specifically
 13 | they generate arrays of vertex positions, texture coordinates, and
 14 | vertex colors for the glyphs and other lines and rectangles for your
 15 | UI. You draw each array of vertices using whatever method you feel like.
 16 | 
 17 | This repo is instead actually using HTML elements like `<div>`
 18 | `<input type="text">`, `<input type="range">`, `<button>` etc...
 19 | 
 20 | This has pluses and minus. 
 21 | 
 22 | The minus is it's likely not as fast as Dear ImGUI (or other ImGUI)
 23 | libraries, especially if you've got a complex UI that updates at 60fps.
 24 | On the other hand it might actually be faster for certain cases.
 25 | 
 26 | The pluses are
 27 | 
 28 | * If you don't update anything in the UI it doesn't use any CPU
 29 | 
 30 | * Styling is free (use CSS)
 31 | 
 32 |   Most ImGUI libraries have very minimal styling features.
 33 | 
 34 | * Layout is free (word wrap, sizing, grids, spacing
 35 | 
 36 |   Most layout happen outside the library based on css
 37 | 
 38 | * Supports all of Unicode
 39 | 
 40 |   Most ImGUI libraries only handle a small number of glyphs.
 41 |   They may or may not handle colored emoji 🍎🍐🍇🐯🐻🦁👾😉🤣
 42 |   or Japanese(日本語), Korean(한국어), Chinese(汉语). I don't think
 43 |   any handle right to left languages like Arabic(عربي).
 44 | 
 45 | * Supports more fonts
 46 | 
 47 |   This might not be fair, I'm sure Dear ImGUI can use more than one
 48 |   font. The thing is it's likely cumbersome, especially multiple
 49 |   sizes in multiple styles where as the browser excels at this.
 50 | 
 51 | * Supports Language Input
 52 | 
 53 |   Many ImGUI libraries have issues with language input. Because they
 54 |   are rendering their own text they have 2nd class support for
 55 |   complex input.
 56 | 
 57 | * Supports Accessability
 58 | 
 59 |   Most ImGUI libraries are not very accessability friendly. Because
 60 |   they just ultimately render pixels there is not much for an accessability
 61 |   feature to look at. With HTML, it's far easier for the browser
 62 |   and or OS to look into the content of the elements.
 63 | 
 64 | * Automatic zoom support
 65 | 
 66 |   The browser zooms. No work required on your part
 67 | 
 68 | * Automatic HD-DPI support
 69 | 
 70 |   The browser will render text and most other widgets taking into
 71 |   account the user's device's HD-DPI features.
 72 | 
 73 | * In general, less code than Dear ImGUI should be executing if you are not updating
 74 |   1000s of values per frame.
 75 | 
 76 |   Consider, Dear ImGUI is mostly stateless AFAIK. That means things like word
 77 |   wrapping a string or computing the size of column might need to be done on
 78 |   every render. In ImHUI's case, that's handled by the browser and if the contents
 79 |   of an element has not changed much of that is cached.
 80 | 
 81 | # WARNING!!!
 82 | 
 83 | ## **This is an experiment!!**
 84 | 
 85 | It is not meant to be used for actual projects (yet?). I'm just trying it
 86 | out, starting with the small snippets of Dear ImGUI demo code and converting
 87 | it to use this library to see if it's possible.
 88 | 
 89 | I'm curious where it will lead, what tradeoffs there are, also what
 90 | good parts of Dear ImGUI come from the concept of an ImGUI vs just
 91 | come from the fact that the other wrote some nice tools you can build
 92 | on.
 93 | 
 94 | There are lots of issues. It is **NOT READY TO USED IN OTHER PROJECTS**
 95 | 
 96 | ## **Requires ES2019**
 97 | 
 98 | At the moment no effort has been made to make it run on anything other
 99 | than 2021 browsers, Chromium based in particular (meaning I have not tested
100 | anywhere else).
101 | 
102 | # LICENSE: MIT
103 | 


--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
 1 | # TO DO
 2 | 
 3 | * Clean up unused elements
 4 | * Stop using details/summary
 5 | * Stop using css:resize
 6 | * how to specify window size?
 7 | * how to specify row height
 8 | * remember window pos/size (as it is we're letting css: resize
 9 |   handle it but when a window gets resized we lose that info.
10 | * should window height be auto fit for content
11 |   * how to specify that
12 |   * how to specify min/max window size
13 | * Check events don't bleed through windows
14 | * Figure out mouse event support
15 | * Fix requirement for node to have an element
16 | * Try to split window into components
17 | * Implement dropdown menus
18 | * Figure out slider basics
19 |   * how to specify precision
20 | * Make a slider with number input (built from parts)
21 | * make an `element(tag, attrs)` type (lowest level?)
22 | * Make `canvas` from `canvasNode`
23 | * see if we can get rid of `update`
24 | * figure out what to do about the log example (long lists)
25 | * consider a `canvas` without requiring re-drawing
26 |   maybe that should be the default
27 | * consider having a canvas callback
28 | * rename sliderFloat to just slider or range?
29 | * change call ImHUI css to `imhui-...`
30 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | .value-line {
2 |   display:flex;
3 |   align-items: center;
4 | }
5 | .value-line>*:nth-child(1) {
6 |   flex: 1 1 auto;
7 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <link rel="stylesheet" href="3rdparty/scrollbars.css">
 2 | <link rel="stylesheet" href="ImHUI.css">
 3 | <link rel="stylesheet" href="index.css">
 4 | <body>
 5 |   <div id="root" class="layout-scrollbar"></div>
 6 |   <canvas id="bg" style="
 7 |      left: 0;
 8 |      top: 0;
 9 |      width: 100%;
10 |      height: 100%;
11 |      position: absolute;
12 |      z-index: -1;
13 |   "></canvas>
14 | </body>
15 | <script src="3rdparty/scrollbars.js"></script>
16 | <script type="module" src="main.js"></script>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ImHUI",
  3 |   "version": "0.0.1",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "balanced-match": {
  8 |       "version": "1.0.0",
  9 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
 10 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
 11 |       "dev": true
 12 |     },
 13 |     "brace-expansion": {
 14 |       "version": "1.1.11",
 15 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 16 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 17 |       "dev": true,
 18 |       "requires": {
 19 |         "balanced-match": "^1.0.0",
 20 |         "concat-map": "0.0.1"
 21 |       }
 22 |     },
 23 |     "concat-map": {
 24 |       "version": "0.0.1",
 25 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 26 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
 27 |       "dev": true
 28 |     },
 29 |     "fs.realpath": {
 30 |       "version": "1.0.0",
 31 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 32 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
 33 |       "dev": true
 34 |     },
 35 |     "glob": {
 36 |       "version": "7.1.6",
 37 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
 38 |       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
 39 |       "dev": true,
 40 |       "requires": {
 41 |         "fs.realpath": "^1.0.0",
 42 |         "inflight": "^1.0.4",
 43 |         "inherits": "2",
 44 |         "minimatch": "^3.0.4",
 45 |         "once": "^1.3.0",
 46 |         "path-is-absolute": "^1.0.0"
 47 |       }
 48 |     },
 49 |     "inflight": {
 50 |       "version": "1.0.6",
 51 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 52 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
 53 |       "dev": true,
 54 |       "requires": {
 55 |         "once": "^1.3.0",
 56 |         "wrappy": "1"
 57 |       }
 58 |     },
 59 |     "inherits": {
 60 |       "version": "2.0.4",
 61 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 62 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 63 |       "dev": true
 64 |     },
 65 |     "ldcp": {
 66 |       "version": "0.1.6",
 67 |       "resolved": "https://registry.npmjs.org/ldcp/-/ldcp-0.1.6.tgz",
 68 |       "integrity": "sha512-a0yT3RdNGztqRj4FSA8FOty5qe7scLc2Ag9L6/T7DHwEV+ifKxLKopyeeZW1gIYMu+Mqn4b1CUwF3bshT7QyZA==",
 69 |       "dev": true,
 70 |       "requires": {
 71 |         "glob": "^7.1.6"
 72 |       }
 73 |     },
 74 |     "minimatch": {
 75 |       "version": "3.0.4",
 76 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
 77 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
 78 |       "dev": true,
 79 |       "requires": {
 80 |         "brace-expansion": "^1.1.7"
 81 |       }
 82 |     },
 83 |     "once": {
 84 |       "version": "1.4.0",
 85 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 86 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 87 |       "dev": true,
 88 |       "requires": {
 89 |         "wrappy": "1"
 90 |       }
 91 |     },
 92 |     "path-is-absolute": {
 93 |       "version": "1.0.1",
 94 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 95 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
 96 |       "dev": true
 97 |     },
 98 |     "typescript": {
 99 |       "version": "4.1.5",
100 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz",
101 |       "integrity": "sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==",
102 |       "dev": true
103 |     },
104 |     "wrappy": {
105 |       "version": "1.0.2",
106 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
107 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
108 |       "dev": true
109 |     }
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ImHUI",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "build": "npm run build-tsc && npm run copy",
 7 |     "build-ci": "npm run build && npm run copy-src",
 8 |     "build-tsc": "tsc",
 9 |     "watch": "npm run copy && tsc --watch",
10 |     "copy": "ldcp index.html build && ldcp ImHUI.css build && ldcp index.css build && ldcp -R 3rdparty/ build/3rdparty/",
11 |     "copy-src": "ldcp -R src/ build/src/"
12 |   },
13 |   "keywords": [
14 |     "UI",
15 |     "ImGUI",
16 |     "ImHUI",
17 |     "HTML",
18 |     "JavaScript",
19 |     "TypeScript"
20 |   ],
21 |   "author": "Gregg Tavares",
22 |   "license": "MIT",
23 |   "devDependencies": {
24 |     "ldcp": "^0.1.6",
25 |     "typescript": "^4.1.5"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/ImHUI.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | export * from './button.js';
 4 | export * from './canvas2D.js';
 5 | export * from './child.js';
 6 | export * from './core.js';
 7 | export * from './colorEdit.js';
 8 | export * from './elements.js';
 9 | export * from './globalState.js'
10 | export * from './inputText.js';
11 | export * from './menu.js';
12 | export * from './plotLines.js';
13 | export * from './sliderFloat.js';
14 | export * from './text.js';
15 | export * from './valueDrag.js';
16 | export * from './window.js';
17 | 
18 | 


--------------------------------------------------------------------------------
/src/background.ts:
--------------------------------------------------------------------------------
  1 | import {resizeCanvasToDisplaySize} from './utils.js';
  2 | 
  3 | const vSrc = `#version 300 es
  4 | uniform float time;
  5 | uniform vec2 resolution;
  6 | uniform float vertexCount;
  7 | 
  8 | out vec4 v_color;
  9 | 
 10 | #define PI radians(180.)
 11 | 
 12 | vec3 hsv2rgb(vec3 c) {
 13 |   c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
 14 |   vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
 15 |   vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
 16 |   return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
 17 | }
 18 | 
 19 | mat4 rotX(float angleInRadians) {
 20 |     float s = sin(angleInRadians);
 21 |     float c = cos(angleInRadians);
 22 | 
 23 |     return mat4(
 24 |       1, 0, 0, 0,
 25 |       0, c, s, 0,
 26 |       0, -s, c, 0,
 27 |       0, 0, 0, 1);
 28 | }
 29 | 
 30 | mat4 rotY(float angleInRadians) {
 31 |     float s = sin(angleInRadians);
 32 |     float c = cos(angleInRadians);
 33 | 
 34 |     return mat4(
 35 |       c, 0,-s, 0,
 36 |       0, 1, 0, 0,
 37 |       s, 0, c, 0,
 38 |       0, 0, 0, 1);
 39 | }
 40 | 
 41 | mat4 rotZ(float angleInRadians) {
 42 |     float s = sin(angleInRadians);
 43 |     float c = cos(angleInRadians);
 44 | 
 45 |     return mat4(
 46 |       c,-s, 0, 0,
 47 |       s, c, 0, 0,
 48 |       0, 0, 1, 0,
 49 |       0, 0, 0, 1);
 50 | }
 51 | 
 52 | mat4 trans(vec3 trans) {
 53 |   return mat4(
 54 |     1, 0, 0, 0,
 55 |     0, 1, 0, 0,
 56 |     0, 0, 1, 0,
 57 |     trans, 1);
 58 | }
 59 | 
 60 | mat4 ident() {
 61 |   return mat4(
 62 |     1, 0, 0, 0,
 63 |     0, 1, 0, 0,
 64 |     0, 0, 1, 0,
 65 |     0, 0, 0, 1);
 66 | }
 67 | 
 68 | mat4 scale(vec3 s) {
 69 |   return mat4(
 70 |     s[0], 0, 0, 0,
 71 |     0, s[1], 0, 0,
 72 |     0, 0, s[2], 0,
 73 |     0, 0, 0, 1);
 74 | }
 75 | 
 76 | mat4 uniformScale(float s) {
 77 |   return mat4(
 78 |     s, 0, 0, 0,
 79 |     0, s, 0, 0,
 80 |     0, 0, s, 0,
 81 |     0, 0, 0, 1);
 82 | }
 83 | 
 84 | mat4 persp(float fov, float aspect, float zNear, float zFar) {
 85 |   float f = tan(PI * 0.5 - 0.5 * fov);
 86 |   float rangeInv = 1.0 / (zNear - zFar);
 87 | 
 88 |   return mat4(
 89 |     f / aspect, 0, 0, 0,
 90 |     0, f, 0, 0,
 91 |     0, 0, (zNear + zFar) * rangeInv, -1,
 92 |     0, 0, zNear * zFar * rangeInv * 2., 0);
 93 | }
 94 | 
 95 | mat4 trInv(mat4 m) {
 96 |   mat3 i = mat3(
 97 |     m[0][0], m[1][0], m[2][0],
 98 |     m[0][1], m[1][1], m[2][1],
 99 |     m[0][2], m[1][2], m[2][2]);
100 |   vec3 t = -i * m[3].xyz;
101 | 
102 |   return mat4(
103 |     i[0], t[0],
104 |     i[1], t[1],
105 |     i[2], t[2],
106 |     0, 0, 0, 1);
107 | }
108 | 
109 | mat4 lookAt(vec3 eye, vec3 target, vec3 up) {
110 |   vec3 zAxis = normalize(eye - target);
111 |   vec3 xAxis = normalize(cross(up, zAxis));
112 |   vec3 yAxis = cross(zAxis, xAxis);
113 | 
114 |   return mat4(
115 |     xAxis, 0,
116 |     yAxis, 0,
117 |     zAxis, 0,
118 |     eye, 1);
119 | }
120 | 
121 | mat4 cameraLookAt(vec3 eye, vec3 target, vec3 up) {
122 |   return inverse(lookAt(eye, target, up));
123 | }
124 | 
125 | // hash function from https://www.shadertoy.com/view/4djSRW
126 | float hash(float p) {
127 |     vec2 p2 = fract(vec2(p * 5.3983, p * 5.4427));
128 |     p2 += dot(p2.yx, p2.xy + vec2(21.5351, 14.3137));
129 |     return fract(p2.x * p2.y * 95.4337);
130 | }
131 | 
132 | // times 2 minus 1
133 | float t2m1(float v) {
134 |   return v * 2. - 1.;
135 | }
136 | 
137 | // times .5 plus .5
138 | float t5p5(float v) {
139 |   return v * 0.5 + 0.5;
140 | }
141 | 
142 | float inv(float v) {
143 |   return 1. - v;
144 | }
145 | 
146 | #define CUBE_POINTS_PER_FACE 6.
147 | #define FACES_PER_CUBE 6.
148 | #define POINTS_PER_CUBE (CUBE_POINTS_PER_FACE * FACES_PER_CUBE)
149 | void getCubePoint(const float id, out vec3 position, out vec3 normal) {
150 |   float quadId = floor(mod(id, POINTS_PER_CUBE) / CUBE_POINTS_PER_FACE);
151 |   float sideId = mod(quadId, 3.);
152 |   float flip   = mix(1., -1., step(2.5, quadId));
153 |   // 0 1 2  1 2 3
154 |   float facePointId = mod(id, CUBE_POINTS_PER_FACE);
155 |   float pointId = mod(facePointId - floor(facePointId / 3.0), 6.0);
156 |   float a = pointId * PI * 2. / 4. + PI * 0.25;
157 |   vec3 p = vec3(cos(a), 0.707106781, sin(a)) * flip;
158 |   vec3 n = vec3(0, 1, 0) * flip;
159 |   float lr = mod(sideId, 2.);
160 |   float ud = step(2., sideId);
161 |   mat4 mat = rotX(lr * PI * 0.5);
162 |   mat *= rotZ(ud * PI * 0.5);
163 |   position = (mat * vec4(p, 1)).xyz;
164 |   normal = (mat * vec4(n, 0)).xyz;
165 | }
166 | 
167 | void main() {
168 |   float pointId = float(gl_VertexID);
169 | 
170 |   vec3 pos;
171 |   vec3 normal;
172 |   getCubePoint(pointId, pos, normal);
173 |   float cubeId = floor(pointId / 36.);
174 |   float numCubes = floor(vertexCount / 36.);
175 |   float down = floor(sqrt(numCubes));
176 |   float across = floor(numCubes / down);
177 | 
178 |   float cx = mod(cubeId, across);
179 |   float cy = floor(cubeId / across);
180 | 
181 |   float cu = cx / (across - 1.);
182 |   float cv = cy / (down - 1.);
183 | 
184 |   float ca = cu * 2. - 1.;
185 |   float cd = cv * 2. - 1.;
186 | 
187 |   float tm = time * 0.1;
188 |   mat4 mat = persp(radians(60.0), resolution.x / resolution.y, 0.1, 1000.0);
189 |   vec3 eye = vec3(cos(tm) * 1., sin(tm * 0.9) * .1 + 1., sin(tm) * 1.);
190 |   vec3 target = vec3(0);
191 |   vec3 up = vec3(0,1,0);
192 | 
193 |   mat *= cameraLookAt(eye, target, up);
194 |   mat *= trans(vec3(ca, 0, cd) * 2.);
195 |   mat *= rotX(time + abs(ca) * 5.);
196 |   mat *= rotZ(time + abs(cd) * 6.);
197 |   mat *= uniformScale(0.03);
198 | 
199 | 
200 |   gl_Position = mat * vec4(pos, 1);
201 |   vec3 n = normalize((mat * vec4(normal, 0)).xyz);
202 | 
203 |   vec3 lightDir = normalize(vec3(0.3, 0.4, -1));
204 | 
205 |   float hue = abs(ca * cd) * 2.;
206 |   float sat = mix(1., 0., abs(ca));
207 |   float val = mix(1., 0.5, abs(cd));
208 |   vec3 color = hsv2rgb(vec3(hue, sat, val));
209 |   v_color = vec4(color * (dot(n, lightDir) * 0.5 + 0.5), 1);
210 | }
211 | `;
212 | 
213 | const fSrc = `#version 300 es
214 | precision mediump float;
215 | in vec4 v_color;
216 | out vec4 color;
217 | void main()
218 | {
219 |    color = v_color;
220 | }
221 | `;
222 | 
223 | function createShader(gl: WebGL2RenderingContext, type: number, src: string) {
224 |   const shader = gl.createShader(type);
225 |   gl.shaderSource(shader, src);
226 |   gl.compileShader(shader);
227 |   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
228 |     throw new Error(gl.getShaderInfoLog(shader));
229 |   }
230 |   return shader;
231 | }
232 | 
233 | function createProgram(gl: WebGL2RenderingContext, vs: string, fs: string, tf?: string[]) {
234 |   const program = gl.createProgram();
235 |   gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vs));
236 |   gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, fs));
237 |   if (tf) {
238 |      gl.transformFeedbackVaryings(program, tf, gl.INTERLEAVED_ATTRIBS); // gl.SEPARATE_ATTRIBS);
239 |   }
240 |   gl.linkProgram(program);
241 |   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
242 |     throw new Error(gl.getProgramInfoLog(program));
243 |   }
244 |   return program;
245 | }
246 | 
247 | const gl = (<HTMLCanvasElement>document.querySelector('#bg')).getContext('webgl2');
248 | const prg = createProgram(gl, vSrc, fSrc);
249 | const timeLoc = gl.getUniformLocation(prg, 'time');
250 | const resolutionLoc = gl.getUniformLocation(prg, 'resolution');
251 | const vertexCountLoc = gl.getUniformLocation(prg, 'vertexCount');
252 | 
253 | gl.useProgram(prg);
254 | 
255 | type Color4 = [number, number, number, number];
256 | 
257 | export const settings = {
258 |   vertexCount: 100000,
259 |   clearColor: <Color4>[0.3, 0.3, 0.3, 1],
260 | };
261 | 
262 | function render(time: number) {
263 |   resizeCanvasToDisplaySize(<HTMLCanvasElement>gl.canvas);
264 | 
265 |   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
266 |   gl.enable(gl.DEPTH_TEST);
267 | 
268 |   gl.clearColor(...settings.clearColor);
269 |   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
270 | 
271 |   gl.uniform1f(timeLoc, time * 0.001);
272 |   gl.uniform2f(resolutionLoc, gl.canvas.width, gl.canvas.height);
273 |   gl.uniform1f(vertexCountLoc, settings.vertexCount);
274 |   gl.drawArrays(gl.TRIANGLES, 0, settings.vertexCount);
275 | 
276 |   requestAnimationFrame(render);
277 | }
278 | requestAnimationFrame(render);


--------------------------------------------------------------------------------
/src/button.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {Node, queueUpdate, context} from './core.js';
 3 | 
 4 | class ButtonNode extends Node {
 5 |   #result: boolean = false;
 6 |   #prompt: string;
 7 | 
 8 |   constructor(str: string) {
 9 |     super('button');
10 |     this.elem.addEventListener('click', () => {
11 |       this.#result = true;
12 |       queueUpdate();
13 |     });
14 |   }
15 | 
16 |   update(str: string): boolean {
17 |     if (this.#prompt !== str) {
18 |       this.#prompt = str;
19 |       this.elem.textContent = str;
20 |     }
21 |     const result = this.#result;
22 |     this.#result = false;
23 |     return result;
24 |   }
25 | }
26 | 
27 | export function button(str: string) : boolean {
28 |   const button = context.getExistingNodeOrRemove<ButtonNode>(ButtonNode, str);
29 |   return button.update(str);
30 | }


--------------------------------------------------------------------------------
/src/canvas2D.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   e,
 3 | } from './utils.js';
 4 | import {
 5 |   context,
 6 |   Node,
 7 |   queueUpdate,
 8 |   queueUpdateBecausePreviousUsagesMightBeStale,
 9 |  } from './core.js'
10 | 
11 | class CanvasNode extends Node {
12 |   #canvasElem: HTMLCanvasElement;
13 |   #ctx: CanvasRenderingContext2D;
14 | 
15 |   constructor() {
16 |     super('canvas');
17 |     this.setClassName('fill-space');
18 |     this.#canvasElem = <HTMLCanvasElement>this.elem;
19 |     this.#ctx =this.#canvasElem.getContext('2d');
20 |     const resizeObserver = new ResizeObserver(queueUpdate);
21 |     resizeObserver.observe(this.elem);
22 |   }
23 | 
24 |   update() {
25 |     return this.#ctx;
26 |   }
27 | }
28 | 
29 | export function canvas2D(): CanvasRenderingContext2D {
30 |   const canvasNode = context.getExistingNodeOrRemove<CanvasNode>(CanvasNode);
31 |   return canvasNode.update();
32 | }


--------------------------------------------------------------------------------
/src/child.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {Node, Context, context} from './core.js';
 3 | import {text} from './text.js';
 4 | 
 5 | export class BasicWrapperNode extends Node {
 6 |   #context: Context;
 7 | 
 8 |   constructor() {
 9 |     super('div');
10 |     this.#context = new Context(this.elem, this.end);
11 |   }
12 | 
13 |   begin(className: string) {
14 |     this.setClassName(className);
15 |     Context.pushContext(this.#context);
16 |   }
17 | 
18 |   end = () => {
19 |     Context.popContext();
20 |   }
21 | }
22 | 
23 | export function beginWrapper(className: string) {
24 |   const node = context.getExistingNodeOrRemove<BasicWrapperNode>(BasicWrapperNode);
25 |   node.begin(className);
26 | }
27 | 
28 | export function endWrapper() {
29 |   context.finish();
30 | }
31 | 
32 | export function beginChild(id: string) {
33 |   beginWrapper('child layout-scrollbar');
34 | }
35 | 
36 | export function endChild() {
37 |   endWrapper();
38 | }
39 | 


--------------------------------------------------------------------------------
/src/colorEdit.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {
 3 |   context,
 4 |   Node,
 5 |   queueUpdate,
 6 |   queueUpdateBecausePreviousUsagesMightBeStale,
 7 | } from './core.js'
 8 | import {valueDrag} from './valueDrag.js';
 9 | import { beginWrapper, endWrapper } from './child.js';
10 | import { text } from './text.js';
11 | 
12 | export type Color = number[];
13 | 
14 | function gs(obj: any, prop: string) {
15 |   return {
16 |     get() { return obj[prop]; },
17 |     set(v: any) { obj[prop] = v; }
18 |   };
19 | }
20 | 
21 | function isArrayEqual(a1: any[], a2: any[]) {
22 |   if (!a1) {
23 |     return !a2;
24 |   } else if (!a2) {
25 |     return false;
26 |   } else {
27 |     if (a1.length !== a2.length) {
28 |       return false;
29 |     }
30 |     for (let i = 0; i < a1.length; ++i) {
31 |       if (a1[i] !== a2[i]) {
32 |         return false;
33 |       }
34 |     }
35 |   }
36 |   return true;
37 | }
38 | 
39 | const rgba = (r: number, g: number, b: number, a: number) => `rgba(${r * 255 | 0},${g * 255 | 0},${b * 255 | 0},${a})`
40 | 
41 | class ColorButtonNode extends Node {
42 |   #result: boolean = false;
43 |   #prompt: string;
44 |   #color: Color;
45 | 
46 |   constructor(str: string, color: Color) {
47 |     super('div');
48 |     this.setClassName('color-button');
49 |     this.elem.addEventListener('click', () => {
50 |       this.#result = true;
51 |       queueUpdate();
52 |     });
53 |   }
54 | 
55 |   update(str: string, value: Color): boolean {
56 |     if (this.#prompt !== str) {
57 |       this.#prompt = str;
58 |       this.elem.textContent = str;
59 |     }
60 |     if (!isArrayEqual(value, this.#color)) {
61 |       this.#color = value.slice();
62 |       this.elem.style.backgroundColor = rgba(value[0], value[1], value[2], value[3]);
63 |     }
64 |     const result = this.#result;
65 |     this.#result = false;
66 |     return result;
67 |   }
68 | }
69 | 
70 | export function colorButton(str: string, value: Color) : boolean {
71 |   const button = context.getExistingNodeOrRemove<ColorButtonNode>(ColorButtonNode, str, value);
72 |   return button.update(str, value);
73 | }
74 | 
75 | export function colorEdit4(prompt: string, value: Color) {
76 |   beginWrapper('color-edit-4 form-line')
77 |     beginWrapper('color-edit-4-sub')
78 |       value[0] = valueDrag('R:', value[0]);
79 |       value[1] = valueDrag('G:', value[1]);
80 |       value[2] = valueDrag('B:', value[2]);
81 |       value[3] = valueDrag('A:', value[3]);
82 |       colorButton('', value);
83 |     endWrapper();
84 |     text(prompt);
85 |   endWrapper();
86 | }


--------------------------------------------------------------------------------
/src/colors.ts:
--------------------------------------------------------------------------------
 1 | import {isDarkMode} from './globalState.js';
 2 | 
 3 | const darkColors: Record<string, string> = {
 4 |   lines: 'white',
 5 | }
 6 | const lightColors: Record<string, string> = {
 7 |   lines: 'black',
 8 | };
 9 | 
10 | export function setColors(
11 |     newLightColors: Record<string, string>,
12 |     newDarkColors?: Record<string, string>) {
13 |   Object.assign(lightColors, newLightColors);
14 |   Object.assign(darkColors, newDarkColors || newLightColors);
15 | }
16 | 
17 | export function getColors(): Record<string, string> {
18 |   return isDarkMode() ? darkColors : lightColors;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/context.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greggman/ImHUI/02d83b18fb78d32afbb2bcc557882cf6f4353d5d/src/context.ts


--------------------------------------------------------------------------------
/src/core.ts:
--------------------------------------------------------------------------------
  1 | import { e } from './utils.js';
  2 | 
  3 | export class Node {
  4 |   elem: HTMLElement;
  5 |   #className: string;
  6 |   getAs<T extends Node>(ctor: {new (...args: any[]):T}): T | undefined {
  7 |     return this instanceof ctor ? <T>(this) : undefined;
  8 |   }
  9 |   constructor(type: string | HTMLElement) {
 10 |     if (typeof type === 'string') {
 11 |       this.elem = document.createElement(type);
 12 |     } else {
 13 |       this.elem = type;
 14 |     }
 15 |   }
 16 |   setClassName(className: string) {
 17 |     if (this.#className !== className) {
 18 |       this.#className = className;
 19 |       this.elem.className = className;
 20 |     }
 21 |   }
 22 |   setParent(parent?: HTMLElement) {
 23 |     if (parent) {
 24 |       parent.appendChild(this.elem);
 25 |     } else {
 26 |       this.remove();
 27 |     }
 28 |   }
 29 |   remove() {
 30 |     this.elem.remove();
 31 |   }
 32 | };
 33 | 
 34 | const noop = () => {};
 35 | const contextStack: Context[] = [];
 36 | 
 37 | export class Context {
 38 |   #currentElem: HTMLElement;
 39 |   #currentChildrenByKey: Map<string, Node> = new Map();
 40 |   #currentUsedKeys: Set<string> = new Set();
 41 |   #currentKey: number = 0;
 42 |   #finishFn: () => void;
 43 | 
 44 |   constructor(elem: HTMLElement, finishFn: () => void = noop) {
 45 |     this.#currentElem = elem;
 46 |     this.#finishFn = finishFn;
 47 |   }
 48 | 
 49 |   getExistingNodeOrRemove<T extends Node>(ctor: {new (...args: any[]):T}, ...args: any[]): T {
 50 |     const key = (this.#currentKey++).toString();
 51 |     let node = this.#currentChildrenByKey.get(key);
 52 |     let typedNode = node?.getAs<T>(ctor);
 53 |     if (!typedNode) {
 54 |       if (node) {
 55 |         node.remove();
 56 |       }
 57 |       typedNode = new ctor(...args);
 58 |       typedNode.setParent(this.#currentElem);
 59 |       this.#currentChildrenByKey.set(key, typedNode);
 60 |     }
 61 |     this.#currentUsedKeys.add(key);
 62 |     return typedNode;
 63 |   }
 64 | 
 65 |   start() {
 66 |     this.#currentKey = 0;
 67 |   }
 68 | 
 69 |   finish() {
 70 |     for (const [key, node] of this.#currentChildrenByKey.entries()) {
 71 |       if (this.#currentUsedKeys.has(key)) {
 72 |         // clear for next pass
 73 |         this.#currentUsedKeys.delete(key);
 74 |       } else {
 75 |         node.remove();
 76 |         this.#currentChildrenByKey.delete(key);
 77 |       }
 78 |     }
 79 |     
 80 |     this.#finishFn();
 81 |   }
 82 | 
 83 |   static pushContext(newContext: Context) {
 84 |     contextStack.push(context);
 85 |     context = newContext;
 86 |     context.start();
 87 |   }
 88 | 
 89 |   static popContext() {
 90 |     context = contextStack.pop();
 91 |   }
 92 | }
 93 | 
 94 | export let context: Context;
 95 | let currentRenderUIFunc: () => void;
 96 | let updateId: number;
 97 | 
 98 | function update() {
 99 |   updateId = undefined;
100 |   currentRenderUIFunc();
101 | }
102 | 
103 | export function queueUpdate() {
104 |   if (!updateId) {
105 |     updateId = requestAnimationFrame(update);
106 |   }
107 | }
108 | 
109 | export function queueUpdateBecausePreviousUsagesMightBeStale() {
110 |   queueUpdate();
111 | }
112 | 
113 | class RootNode extends Node {
114 |   #context: Context;
115 | 
116 |   constructor(elem: HTMLElement) {
117 |     super(elem);
118 |     this.#context = new Context(elem);
119 |   }
120 | 
121 |   // FIX!
122 |   setAsCurrent() {
123 |     context = this.#context;
124 |   }
125 | 
126 |   // FIX!
127 |   isCurrent() {
128 |     return context === this.#context;
129 |   }
130 | }
131 | 
132 | let root: RootNode;
133 | 
134 | export function setup(elem: HTMLElement, renderUIFunc: () => void) {
135 |   currentRenderUIFunc = renderUIFunc;
136 |   root = new RootNode(elem);
137 |   queueUpdate();
138 | 
139 |   const resizeObserver = new ResizeObserver(queueUpdate);
140 |   resizeObserver.observe(elem);
141 | }
142 | 
143 | export function start() {
144 |   // FIX!
145 |   if (context) {
146 |     throw new Error('context should not be set on start');
147 |   }
148 |   root.setAsCurrent();
149 |   context.start();
150 | }
151 | 
152 | export function finish() {
153 |   context.finish();
154 |   if (!root.isCurrent()) {
155 |     throw new Error('not root context at finish. Are you missing an ImMUI.end or endWrapper, etc...?');
156 |   }
157 |   context = null;
158 | }
159 | 
160 | function copyChanges(src: any, shadow: any, dst: any) {
161 |   for (const [k, v] of Object.entries(src)) {
162 |     if (k !== 'style') {
163 |       if (shadow[k] !== v) {
164 |         shadow[k] = v;
165 |         dst[k] = v;
166 |       }
167 |     }
168 |   }
169 | }
170 | 
171 | class ElementNode extends Node {
172 |   #text: string;
173 |   #attrs: Record<string, any>;
174 |   #style: Record<string, any>;
175 | 
176 |   constructor(type: string) {
177 |     super(type);
178 |     this.#attrs = {};
179 |     this.#style = {};
180 |   }
181 |   update(attrs?: Record<string, any>) {
182 |     if (attrs) {
183 |       copyChanges(attrs, this.#attrs, this.elem);
184 |       const {style} = attrs;
185 |       if (style) {
186 |         copyChanges(style, this.#style, this.elem.style);
187 |       }
188 |     }
189 |   }
190 | }
191 | 
192 | export function element(type: string, attrs?: Record<string, any>) {
193 |   const node = context.getExistingNodeOrRemove<ElementNode>(ElementNode, type);
194 |   node.update(attrs);
195 | }
196 | 


--------------------------------------------------------------------------------
/src/elements.ts:
--------------------------------------------------------------------------------
1 | import {element} from './core.js';
2 | 
3 | export function separator() {
4 |   element('hr');
5 | }
6 | 


--------------------------------------------------------------------------------
/src/globalState.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   queueUpdate,
 3 | } from './core.js';
 4 | 
 5 | const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
 6 | darkMatcher.addEventListener('change', () => {
 7 |   queueUpdate();
 8 | });
 9 | 
10 | export function isDarkMode(): boolean {
11 |   return darkMatcher.matches;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/inputText.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {
 3 |   context,
 4 |   Node,
 5 |   queueUpdate,
 6 |   queueUpdateBecausePreviousUsagesMightBeStale,
 7 |  } from './core.js'
 8 | import {text} from './text.js';
 9 | import { beginWrapper, endWrapper } from './child.js';
10 | 
11 | class InputTextNode extends Node {
12 |   #value: string;
13 |   #haveNewValue: boolean = false;
14 | 
15 |   constructor(value: string) {
16 |     super('input');
17 |     const inputElem = <HTMLInputElement>this.elem;
18 |     inputElem.type = 'text';
19 |     inputElem.addEventListener('input', (e) => {
20 |       this.#value = inputElem.value;
21 |       this.#haveNewValue = true;
22 |       queueUpdate();
23 |     });
24 |   }
25 | 
26 |   update(value: string): string {
27 |     if (this.#haveNewValue) {
28 |       this.#haveNewValue = false;
29 |       value = this.#value;
30 |       queueUpdateBecausePreviousUsagesMightBeStale();
31 |     } else {
32 |       if (value !== this.#value) {
33 |         this.#value = value;
34 |         (<HTMLInputElement>this.elem).value = value;
35 |       }
36 |     }
37 |     return value;
38 |   }
39 | }
40 | 
41 | export function inputTextNode(value: string) {
42 |   const node = context.getExistingNodeOrRemove<InputTextNode>(InputTextNode, value);
43 |   return node.update(value);
44 | }
45 | 
46 | export function inputText(prompt: string, value: string): string {
47 |   beginWrapper('input-text form-line');
48 |     value = inputTextNode(value);
49 |     text(prompt);
50 |   endWrapper();
51 |   return value;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
  1 | import { queueUpdate } from './core.js';
  2 | import * as ImHUI from './ImHUI.js';
  3 | import {settings} from './background.js';
  4 | import { beginWrapper, endWrapper } from './child.js';
  5 | import { text } from './text.js';
  6 | 
  7 | const data = {
  8 |   str: 'foobar 😎☀🌴🍹',
  9 |   v: 0.5,
 10 |   vd: 0.5,
 11 |   fps: 0,
 12 |   myColor: [0.9, 0.7, 0.5, 1.0],
 13 |   myValues: new Array(120).fill(0),
 14 |   myRandom: new Array(120).fill(0),
 15 | };
 16 | 
 17 | const smallWindowSettings = <ImHUI.WindowSettings>{title: "Small Test Window", active: true};
 18 | const testWindowSettings = <ImHUI.WindowSettings>{title: "Test Window", active: true}
 19 | const toolWindowSettings = <ImHUI.WindowSettings>{title: "My First Tool", active: true}
 20 | 
 21 | const values = [1, 2];
 22 | 
 23 | function smallTestWindow() {
 24 |   ImHUI.begin(smallWindowSettings);
 25 |     ImHUI.text("Window Settings:");
 26 |     ImHUI.text(`  left  : ${smallWindowSettings.rect.left}`);
 27 |     ImHUI.text(`  top   : ${smallWindowSettings.rect.top}`);
 28 |     ImHUI.text(`  width : ${smallWindowSettings.rect.width}`);
 29 |     ImHUI.text(`  height: ${smallWindowSettings.rect.height}`);
 30 |     ImHUI.separator();
 31 | 
 32 |     if (ImHUI.button("Add Value")) {
 33 |       values.push(Math.random());
 34 |     }
 35 |     for (let i = 0; i < values.length; ++i) {
 36 |       beginWrapper('value-line');
 37 |         values[i] = ImHUI.sliderFloat(`${i}`, values[i], 0, 10);
 38 |         if (ImHUI.button('✖')) {
 39 |           values.splice(i, 1);
 40 |           --i;
 41 |         }
 42 |       endWrapper();
 43 |     }
 44 |     ImHUI.plotLines('values', values, 0, 10);
 45 |   ImHUI.end();
 46 | }
 47 | 
 48 | function testWindow() {
 49 |   ImHUI.begin(testWindowSettings);
 50 |     ImHUI.text(`Hello, world 🌐 ${123}`);
 51 | 
 52 |     if (ImHUI.button("Save")) {
 53 |       console.log('save');
 54 |     }
 55 |     data.str = ImHUI.inputText("string", data.str);
 56 |     data.v = ImHUI.sliderFloat("float", data.v, 0, 5);
 57 |     data.str = ImHUI.inputText("string", data.str);
 58 |     data.v = ImHUI.sliderFloat("float", data.v, 0, 15);
 59 | 
 60 |     ImHUI.text(`The string is: ${data.str}`);
 61 |     ImHUI.text(`The float is: float ${data.v}`);
 62 | 
 63 |     ImHUI.colorEdit4("Background Color", settings.clearColor);
 64 |     settings.vertexCount = ImHUI.sliderFloat("Vertex Count", settings.vertexCount, 0, 100000);
 65 | 
 66 |   ImHUI.end();
 67 | }
 68 | 
 69 | function toolWindow() {
 70 |   ImHUI.begin(toolWindowSettings);
 71 |     if (ImHUI.beginMenuBar())
 72 |     {
 73 |         if (ImHUI.beginMenu("File"))
 74 |         {
 75 |             if (ImHUI.menuItem("Open..", "Ctrl+O")) { console.log('open'); }
 76 |             if (ImHUI.menuItem("Save", "Ctrl+S"))   { console.log('save'); }
 77 |             if (ImHUI.menuItem("Close", "Ctrl+W"))  { toolWindowSettings.active = false; }
 78 |             ImHUI.endMenu();
 79 |         }
 80 |         ImHUI.endMenuBar();
 81 |     }
 82 | 
 83 |     // Edit a color (stored as ~4 floats)
 84 |     ImHUI.colorEdit4("Color", data.myColor);
 85 | 
 86 |     ImHUI.text(`fps: ${data.fps.toFixed(1)}`);
 87 | 
 88 |     // Plot some values
 89 |     ImHUI.plotLines("Frame Times", data.myValues, 0, 1000 / 30);
 90 |     ImHUI.plotLines("Sine Wave", data.myRandom, -1.1, 1.1);
 91 | 
 92 |     // Display contents in a scrolling region
 93 |     ImHUI.textColored('yellow', "Important Stuff");
 94 |     ImHUI.beginChild("Scrolling");
 95 |     for (let n = 0; n < 50; n++)
 96 |         ImHUI.text(`${n.toString().padStart(4, '0')}: Some text`);
 97 |     ImHUI.endChild();
 98 | 
 99 |   ImHUI.end();
100 | }
101 | 
102 | function renderUI() {
103 |   ImHUI.start();
104 | 
105 |   smallTestWindow();
106 |   testWindow();
107 |   toolWindow();
108 | 
109 |   ImHUI.finish();
110 | }
111 | 
112 | ImHUI.setup(document.querySelector('#root'), renderUI);
113 | 
114 | function r(min: number, max?: number) {
115 |   if (max === undefined) {
116 |     max = min;
117 |     min = 0;
118 |   }
119 |   return Math.random() * (max - min) + min;
120 | }
121 | 
122 | function shiftArray(array: any[], v: any) {
123 |   array.push(v);
124 |   array.shift();
125 | }
126 | 
127 | let then = 0;
128 | function render(now: number) {
129 |   const elapsedTime = now - then;
130 |   data.fps = 1000 / elapsedTime;
131 |   shiftArray(data.myValues, elapsedTime);
132 |   then = now;
133 | 
134 |   shiftArray(data.myRandom, Math.sin(now * 0.01));
135 | 
136 |   queueUpdate();
137 | 
138 |   requestAnimationFrame(render);
139 | }
140 | 
141 | requestAnimationFrame(render);


--------------------------------------------------------------------------------
/src/menu.ts:
--------------------------------------------------------------------------------
 1 | export function beginMenuBar(): boolean {
 2 |   return true;
 3 | }
 4 | 
 5 | export function endMenuBar() {
 6 | 
 7 | }
 8 | 
 9 | export function beginMenu(title: string): boolean {
10 |   return true;
11 | }
12 | 
13 | export function endMenu() {
14 | 
15 | }
16 | 
17 | export function menuItem(title: string, shortcut: string): boolean {
18 |   return false;
19 | }
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/src/plotLines.ts:
--------------------------------------------------------------------------------
 1 | import {canvas2D} from './canvas2D.js';
 2 | import {beginWrapper, endWrapper} from './child.js';
 3 | import {getColors} from './colors.js';
 4 | import {text} from './text.js';
 5 | import {resizeCanvasToDisplaySize} from './utils.js';
 6 | 
 7 | export function plotLines(
 8 |     prompt: string,
 9 |     points: number[],
10 |     scaleMin?: number,
11 |     scaleMax?: number,
12 |     size?: number[],
13 | ) {
14 |   beginWrapper('plot-lines form-line');
15 |     beginWrapper('div');
16 |       const ctx = canvas2D();
17 |       resizeCanvasToDisplaySize(ctx.canvas);
18 |       const {width, height} = ctx.canvas;
19 |       const colors = getColors();
20 |       ctx.clearRect(0, 0, width, height);
21 |       ctx.strokeStyle = colors.lines;
22 |       let min = points[0];
23 |       let max = min;
24 |       if (scaleMin === undefined || scaleMax === undefined) {
25 |         for (let i = 1; i < points.length; ++i) {
26 |           const x = points[i];
27 |           min = Math.min(min, x);
28 |           max = Math.max(max, x);
29 |         }
30 |       }
31 |       min = scaleMin === undefined ? min : scaleMin;
32 |       max = scaleMax === undefined ? max : scaleMax;
33 |       ctx.beginPath();
34 |       const range = max - min;
35 |       for (let i = 0; i < points.length; ++i) {
36 |         ctx.lineTo(
37 |           i * width / ((points.length - 1) || 1),
38 |           (points[i] - min) * height / range);
39 |       }
40 |       ctx.stroke();
41 |     endWrapper();
42 |     text(prompt);
43 |   endWrapper();
44 | }


--------------------------------------------------------------------------------
/src/sliderFloat.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {
 3 |   context,
 4 |   Node,
 5 |   queueUpdate,
 6 |   queueUpdateBecausePreviousUsagesMightBeStale,
 7 |  } from './core.js'
 8 | import {text} from './text.js';
 9 | import { beginWrapper, endWrapper } from './child.js';
10 | 
11 | class SliderFloatNode extends Node {
12 |   #inputElem: HTMLInputElement;
13 |   #value: number;
14 |   #haveNewValue: boolean = false;
15 |   #min: number;
16 |   #max: number;
17 | 
18 |   constructor() {
19 |     super('input');
20 |     this.#inputElem = <HTMLInputElement>this.elem;
21 |     this.#inputElem.type = 'range';
22 |     this.#inputElem.addEventListener('input', (e) => {
23 |       this.#value = parseFloat(this.#inputElem.value);
24 |       this.#haveNewValue = true;
25 |       queueUpdate();
26 |     });
27 |   }
28 | 
29 |   update(value: number, min: number, max: number): number {
30 |     if (this.#haveNewValue) {
31 |       this.#haveNewValue = false;
32 |       value = this.#value;
33 |       queueUpdateBecausePreviousUsagesMightBeStale();
34 |     } else {
35 |       if (value !== this.#value) {
36 |         this.#value = value;
37 |         this.#inputElem.value = value.toString();
38 |       }
39 |     }
40 |     if (min !== this.#min) {
41 |       this.#min = min;
42 |       this.#inputElem.min = min.toString();
43 |       this.#inputElem.step = ((this.#max - this.#min) / 1000).toString();
44 |     }
45 |     if (max !== this.#max) {
46 |       this.#max = max;
47 |       this.#inputElem.max = max.toString();
48 |       this.#inputElem.step = ((this.#max - this.#min) / 1000).toString();
49 |     }
50 |     return value;
51 |   }
52 | }
53 | 
54 | export function sliderFloatNode(value: number, min = 0, max = 1): number {
55 |   const node = context.getExistingNodeOrRemove<SliderFloatNode>(SliderFloatNode);
56 |   return node.update(value, min, max);
57 | }
58 | 
59 | export function sliderFloat(prompt: string, value: number, min = 0, max = 1): number {
60 |   beginWrapper('slider-float form-line');
61 |     beginWrapper('slider-value');
62 |       value = sliderFloatNode(value, min, max);
63 |       text(value.toFixed(2));
64 |     endWrapper();
65 |     text(prompt);
66 |   endWrapper();
67 |   return value;
68 | }
69 | 


--------------------------------------------------------------------------------
/src/text.ts:
--------------------------------------------------------------------------------
 1 | import {e} from './utils.js';
 2 | import {Node, context} from './core.js'
 3 | 
 4 | class TextNode extends Node {
 5 |   #text: string;
 6 | 
 7 |   constructor(str: string) {
 8 |     super('div');
 9 |   }
10 |   update(str: string) {
11 |     if (this.#text !== str) {
12 |       this.#text = str;
13 |       this.elem.textContent = str;
14 |     }
15 |   }
16 | }
17 | 
18 | class ClassTextNode extends Node {
19 |   #text: string;
20 | 
21 |   constructor(type: string) {
22 |     // FIX! You can't pass the type OR we need to fix the code
23 |     // that gets an old node because it checks by JS class instanceof
24 |     // not by element type
25 |     super(type);
26 |   }
27 |   update(className: string, str: string) {
28 |     if (this.#text !== str) {
29 |       this.#text = str;
30 |       this.elem.textContent = str;
31 |     }
32 |     this.setClassName(className);
33 |   }
34 | }
35 | 
36 | class TypeTextNode extends Node {
37 |   #text: string;
38 | 
39 |   constructor(type: string) {
40 |     // FIX! You can't pass the type OR we need to fix the code
41 |     // that gets an old node because it checks by JS class instanceof
42 |     // not by element type
43 |     super(type);
44 |   }
45 |   update(str: string) {
46 |     if (this.#text !== str) {
47 |       this.#text = str;
48 |       this.elem.textContent = str;
49 |     }
50 |   }
51 | }
52 | 
53 | class ColorTextNode extends Node {
54 |   #text: string;
55 |   #color: string
56 | 
57 |   constructor(color: string, str: string) {
58 |     super('div');
59 |   }
60 |   update(color: string, str: string) {
61 |     if (this.#text !== str) {
62 |       this.#text = str;
63 |       this.elem.textContent = str;
64 |     }
65 |     if (this.#color !== color) {
66 |       this.#color = color;
67 |       this.elem.style.color = color;
68 |     }
69 |   }
70 | }
71 | 
72 | export function classTypeText(type: string, className: string, str: string) {
73 |   const node = context.getExistingNodeOrRemove<ClassTextNode>(ClassTextNode, type, className, str);
74 |   node.update(className, str);
75 | }
76 | 
77 | export function typeText(type: string, str: string) {
78 |   const node = context.getExistingNodeOrRemove<TypeTextNode>(TypeTextNode, type, str);
79 |   node.update(str);
80 | }
81 | 
82 | export function classText(className: string, str: string) {
83 |   classTypeText('div', className, str);
84 | }
85 | 
86 | export function text(str: string) {
87 |   const node = context.getExistingNodeOrRemove<TextNode>(TextNode, str);
88 |   node.update(str);
89 | }
90 | 
91 | export function textColored(color: string, str: string) {
92 |   const node = context.getExistingNodeOrRemove<ColorTextNode>(ColorTextNode, color, str);
93 |   node.update(color, str);
94 | }


--------------------------------------------------------------------------------
/src/types/ResizeObserver.d.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * The **ResizeObserver** interface reports changes to the dimensions of an
  3 |  * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
  4 |  * or border box, or the bounding box of an
  5 |  * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
  6 |  *
  7 |  * > **Note**: The content box is the box in which content can be placed,
  8 |  * > meaning the border box minus the padding and border width. The border box
  9 |  * > encompasses the content, padding, and border. See
 10 |  * > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
 11 |  * > for further explanation.
 12 |  *
 13 |  * `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
 14 |  * are often created when resizing via a callback function. It does this by only
 15 |  * processing elements deeper in the DOM in subsequent frames. Implementations
 16 |  * should, if they follow the specification, invoke resize events before paint
 17 |  * and after layout.
 18 |  *
 19 |  * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
 20 |  */
 21 | declare class ResizeObserver {
 22 |   /**
 23 |    * The **ResizeObserver** constructor creates a new `ResizeObserver` object,
 24 |    * which can be used to report changes to the content or border box of an
 25 |    * `Element` or the bounding box of an `SVGElement`.
 26 |    *
 27 |    * @example
 28 |    * var ResizeObserver = new ResizeObserver(callback)
 29 |    *
 30 |    * @param callback
 31 |    * The function called whenever an observed resize occurs. The function is
 32 |    * called with two parameters:
 33 |    * * **entries**
 34 |    *   An array of
 35 |    *   [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
 36 |    *   objects that can be used to access the new dimensions of the element
 37 |    *   after each change.
 38 |    * * **observer**
 39 |    *   A reference to the `ResizeObserver` itself, so it will definitely be
 40 |    *   accessible from inside the callback, should you need it. This could be
 41 |    *   used for example to automatically unobserve the observer when a certain
 42 |    *   condition is reached, but you can omit it if you don't need it.
 43 |    *
 44 |    * The callback will generally follow a pattern along the lines of:
 45 |    * ```js
 46 |    * function(entries, observer) {
 47 |    *   for (let entry of entries) {
 48 |    *     // Do something to each entry
 49 |    *     // and possibly something to the observer itself
 50 |    *   }
 51 |    * }
 52 |    * ```
 53 |    *
 54 |    * The following snippet is taken from the
 55 |    * [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
 56 |    * ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
 57 |    * example:
 58 |    * @example
 59 |    * const resizeObserver = new ResizeObserver(entries => {
 60 |    *   for (let entry of entries) {
 61 |    *     if(entry.contentBoxSize) {
 62 |    *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
 63 |    *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
 64 |    *     } else {
 65 |    *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
 66 |    *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
 67 |    *     }
 68 |    *   }
 69 |    * });
 70 |    *
 71 |    * resizeObserver.observe(divElem);
 72 |    */
 73 |   constructor(callback: ResizeObserverCallback);
 74 | 
 75 |   /**
 76 |    * The **disconnect()** method of the
 77 |    * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
 78 |    * interface unobserves all observed
 79 |    * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
 80 |    * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
 81 |    * targets.
 82 |    */
 83 |   disconnect: () => void;
 84 | 
 85 |   /**
 86 |    * The `observe()` method of the
 87 |    * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
 88 |    * interface starts observing the specified
 89 |    * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
 90 |    * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
 91 |    *
 92 |    * @example
 93 |    * resizeObserver.observe(target, options);
 94 |    *
 95 |    * @param target
 96 |    * A reference to an
 97 |    * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
 98 |    * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
 99 |    * to be observed.
100 |    *
101 |    * @param options
102 |    * An options object allowing you to set options for the observation.
103 |    * Currently this only has one possible option that can be set.
104 |    */
105 |   observe: (target: Element, options?: ResizeObserverObserveOptions) => void;
106 | 
107 |   /**
108 |    * The **unobserve()** method of the
109 |    * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
110 |    * interface ends the observing of a specified
111 |    * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
112 |    * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
113 |    */
114 |   unobserve: (target: Element) => void;
115 | }
116 | 
117 | interface ResizeObserverObserveOptions {
118 |   /**
119 |    * Sets which box model the observer will observe changes to. Possible values
120 |    * are `content-box` (the default), and `border-box`.
121 |    *
122 |    * @default "content-box"
123 |    */
124 |   box?: "content-box" | "border-box";
125 | }
126 | 
127 | /**
128 |  * The function called whenever an observed resize occurs. The function is
129 |  * called with two parameters:
130 |  *
131 |  * @param entries
132 |  * An array of
133 |  * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
134 |  * objects that can be used to access the new dimensions of the element after
135 |  * each change.
136 |  *
137 |  * @param observer
138 |  * A reference to the `ResizeObserver` itself, so it will definitely be
139 |  * accessible from inside the callback, should you need it. This could be used
140 |  * for example to automatically unobserve the observer when a certain condition
141 |  * is reached, but you can omit it if you don't need it.
142 |  *
143 |  * The callback will generally follow a pattern along the lines of:
144 |  * @example
145 |  * function(entries, observer) {
146 |  *   for (let entry of entries) {
147 |  *     // Do something to each entry
148 |  *     // and possibly something to the observer itself
149 |  *   }
150 |  * }
151 |  *
152 |  * @example
153 |  * const resizeObserver = new ResizeObserver(entries => {
154 |  *   for (let entry of entries) {
155 |  *     if(entry.contentBoxSize) {
156 |  *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
157 |  *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
158 |  *     } else {
159 |  *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
160 |  *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
161 |  *     }
162 |  *   }
163 |  * });
164 |  *
165 |  * resizeObserver.observe(divElem);
166 |  */
167 | type ResizeObserverCallback = (
168 |   entries: ResizeObserverEntry[],
169 |   observer: ResizeObserver,
170 | ) => void;
171 | 
172 | /**
173 |  * The **ResizeObserverEntry** interface represents the object passed to the
174 |  * [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
175 |  * constructor's callback function, which allows you to access the new
176 |  * dimensions of the
177 |  * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
178 |  * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
179 |  * being observed.
180 |  */
181 | interface ResizeObserverEntry {
182 |   /**
183 |    * An object containing the new border box size of the observed element when
184 |    * the callback is run.
185 |    */
186 |   readonly borderBoxSize: ResizeObserverEntryBoxSize;
187 | 
188 |   /**
189 |    * An object containing the new content box size of the observed element when
190 |    * the callback is run.
191 |    */
192 |   readonly contentBoxSize: ResizeObserverEntryBoxSize;
193 | 
194 |   /**
195 |    * A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
196 |    * object containing the new size of the observed element when the callback is
197 |    * run. Note that this is better supported than the above two properties, but
198 |    * it is left over from an earlier implementation of the Resize Observer API,
199 |    * is still included in the spec for web compat reasons, and may be deprecated
200 |    * in future versions.
201 |    */
202 |   // node_modules/typescript/lib/lib.dom.d.ts
203 |   readonly contentRect: DOMRectReadOnly;
204 | 
205 |   /**
206 |    * A reference to the
207 |    * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
208 |    * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
209 |    * being observed.
210 |    */
211 |   readonly target: Element;
212 | }
213 | 
214 | /**
215 |  * The **borderBoxSize** read-only property of the
216 |  * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
217 |  * interface returns an object containing the new border box size of the
218 |  * observed element when the callback is run.
219 |  */
220 | interface ResizeObserverEntryBoxSize {
221 |   /**
222 |    * The length of the observed element's border box in the block dimension. For
223 |    * boxes with a horizontal
224 |    * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
225 |    * this is the vertical dimension, or height; if the writing-mode is vertical,
226 |    * this is the horizontal dimension, or width.
227 |    */
228 |   blockSize: number;
229 | 
230 |   /**
231 |    * The length of the observed element's border box in the inline dimension.
232 |    * For boxes with a horizontal
233 |    * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
234 |    * this is the horizontal dimension, or width; if the writing-mode is
235 |    * vertical, this is the vertical dimension, or height.
236 |    */
237 |   inlineSize: number;
238 | }
239 | 
240 | interface Window {
241 |   ResizeObserver: typeof ResizeObserver;
242 | }


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export function e(tag: string, attrs = {}, children: (HTMLElement|string)[] = []): HTMLElement { 
 2 |   const elem = <any>document.createElement(tag);
 3 |   for (const [key, value] of Object.entries(attrs)) {
 4 |     if (typeof value === 'object') {
 5 |       for (const [k, v] of Object.entries(value)) {
 6 |         elem[key][k] = v;
 7 |       }
 8 |     } else if (elem[key] === undefined) {
 9 |       elem.setAttribute(key, value);
10 |     } else {
11 |       elem[key] = value;
12 |     }
13 |   }
14 |   if (Array.isArray(children)) {
15 |     for (const child of children) {
16 |       if (typeof child === 'string') {
17 |         elem.appendChild(document.createTextNode(child));
18 |       } else {
19 |         elem.appendChild(child);
20 |       }
21 |     }
22 |   } else {
23 |     elem.textContent = children;
24 |   }
25 |   return elem;
26 | }
27 | 
28 | export function clamp(v: number, min: number = 0, max: number = 1): number {
29 |   return Math.min(Math.max(v, min), max);
30 | }
31 | 
32 | export function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
33 |   const width = canvas.clientWidth;
34 |   const height = canvas.clientHeight;
35 |   const needResize = width !== canvas.width || height !== canvas.height;
36 |   if (needResize) {
37 |     canvas.width = width;
38 |     canvas.height = height;
39 |   }
40 |   return needResize;
41 | }
42 | 


--------------------------------------------------------------------------------
/src/valueDrag.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   clamp,
 3 |   e,
 4 | } from './utils.js';
 5 | import {
 6 |   context,
 7 |   Node,
 8 |   queueUpdate,
 9 |   queueUpdateBecausePreviousUsagesMightBeStale,
10 |  } from './core.js'
11 | 
12 | class ValueDragNode extends Node {
13 |   #prompt: string;
14 |   #startValue: number;
15 |   #value: number;
16 |   #min: number = 0;
17 |   #max: number = 0;
18 |   #precision: number = 2;
19 |   #haveNewValue: boolean = false;
20 |   #mouseStartX: number;
21 |   #moveRange: number = 100;
22 | 
23 |   constructor(prompt: string, value: number, min: number = 0, max:number = 1, precision: number = 2) {
24 |     super('div');
25 |     this.setClassName('value-drag');
26 |     this.elem.addEventListener('mousedown', (e: MouseEvent) => {
27 |       this.#mouseStartX = e.clientX;
28 |       this.#startValue = this.#value;
29 |       window.addEventListener('mousemove', this.#onMouseMove);
30 |       window.addEventListener('mouseup', this.#onMouseUp);
31 |     });
32 |   }
33 | 
34 |   #onMouseMove = (e: MouseEvent) => {
35 |     const deltaNorm = (e.clientX - this.#mouseStartX) / this.#moveRange;
36 |     const delta = (this.#max - this.#min) * deltaNorm;
37 |     const newValue = clamp(this.#startValue + delta, this.#min, this.#max);
38 |     this.#value = newValue;
39 |     this.#haveNewValue = true;
40 |     this._update();
41 |     queueUpdate();
42 |   }
43 | 
44 |   #onMouseUp = () => {
45 |     window.removeEventListener('mousemove', this.#onMouseMove);
46 |     window.removeEventListener('mouseup', this.#onMouseUp);
47 |   }
48 | 
49 |   _update() {
50 |     this.elem.textContent = `${this.#prompt}${this.#value.toFixed(this.#precision)}`
51 |   }
52 | 
53 |   update(prompt: string, value: number, min: number = 0, max: number = 1, precision: number = 2): number {
54 |     if (this.#haveNewValue) {
55 |       this.#haveNewValue = false;
56 |       value = this.#value;
57 |       queueUpdateBecausePreviousUsagesMightBeStale();
58 |     } else {
59 |       if (value !== this.#value ||
60 |           prompt !== this.#prompt ||
61 |           min !== this.#min ||
62 |           max !== this.#max ||
63 |           precision !== this.#precision) {
64 |         this.#value = clamp(value, min, max);
65 |         this.#prompt = prompt;
66 |         this.#min = min;
67 |         this.#max = max;
68 |         this.#precision = precision;
69 |         this._update();
70 |       }
71 |     }
72 |     return value;
73 |   }
74 | }
75 | 
76 | export function valueDrag(prompt: string, value: number, min = 0, max = 1, precision: number = 2): number {
77 |   const node = context.getExistingNodeOrRemove<ValueDragNode>(ValueDragNode, value, min, max);
78 |   return node.update(prompt, value, min, max);
79 | }
80 | 
81 | 


--------------------------------------------------------------------------------
/src/window.ts:
--------------------------------------------------------------------------------
  1 | import {e} from './utils.js';
  2 | import {Node, Context, context, queueUpdate} from './core.js';
  3 | 
  4 | let windowCount = 0;
  5 | 
  6 | export class WrapperNode extends Node {
  7 |   #context: Context;
  8 |   #detailsElem: HTMLDetailsElement;
  9 |   #value: boolean;
 10 |   #haveNewValue: boolean;
 11 | 
 12 |   constructor(type: string, className: string, value: boolean) {
 13 |     super(type);
 14 |     this.setClassName(className);
 15 |     this.#detailsElem = <HTMLDetailsElement>this.elem;
 16 |     this.#context = new Context(this.elem, this.end);
 17 |     this.#detailsElem.addEventListener('click', (e) => {
 18 |       this.#value = this.#detailsElem.open;
 19 |       this.#haveNewValue = true;
 20 |       queueUpdate();
 21 |     });
 22 |   }
 23 | 
 24 |   update(value: boolean): boolean {
 25 |     if (this.#haveNewValue) {
 26 |       value = this.#value;
 27 |     } else {
 28 |       if (this.#value !== value) {
 29 |         this.#detailsElem.open = !!this.#value;
 30 |       }
 31 |     }
 32 |     return value;
 33 |   }
 34 | 
 35 |   begin() {
 36 |     Context.pushContext(this.#context);
 37 |   }
 38 | 
 39 |   end = () => {
 40 |     Context.popContext();
 41 |   }
 42 | }
 43 | 
 44 | function px(v: number): string {
 45 |   return `${v | 0}px`;
 46 | }
 47 | 
 48 | function addMoveHandlers(elem: HTMLElement) {
 49 | }
 50 | 
 51 | // FIX: should we split window and window title
 52 | // and have window title be implemented from draggable
 53 | // where draggable is something like
 54 | //
 55 | //    draggable('className', gs('obj', 'pos'))
 56 | //
 57 | // and sizeable()
 58 | //
 59 | //    sizeable('className', gs('obj', 'size'))
 60 | //
 61 | // so then the code is something like
 62 | //
 63 | // const win = {
 64 | //   pos: [0, 0],
 65 | //   size: [300, 100],
 66 | // };
 67 | // beingWindow(win.pos, win.size)
 68 | //   sizeable('div', gs(win, size))   // allows changing size
 69 | //   draggable('window', gs(win, 'pos'))  // allows updating pos
 70 | // endWindow();
 71 | //   
 72 | //  
 73 | //
 74 | 
 75 | type Rect = {
 76 |   left: number,
 77 |   top: number,
 78 |   width: number,
 79 |   height: number,
 80 | };
 81 | 
 82 | function areRectsEqual(a: Rect, b: Rect) {
 83 |   if (a === b) {
 84 |     return true;
 85 |   }
 86 |   if (!a || !b) {
 87 |     return false;
 88 |   }
 89 |   return a.left === b.left &&
 90 |          a.top === b.top &&
 91 |          a.width === b.width &&
 92 |          a.height === b.height;
 93 | }
 94 | 
 95 | export type WindowSettings = {
 96 |   active?: boolean,
 97 |   rect?: Rect,
 98 |   title?: string,
 99 |   flags?: number,
100 | };
101 | 
102 | export class WindowNode extends Node {
103 |   #context: Context;
104 |   #windowElem: HTMLElement;
105 |   #detailsElem: HTMLDetailsElement;
106 |   #summaryElem: HTMLElement;
107 |   #settings: WindowSettings;
108 |   #haveNewSettings: boolean;
109 |   #needSize: boolean;
110 | 
111 |   constructor(settings: WindowSettings) {
112 |     super('div');
113 |     this.#summaryElem = e('summary');
114 |     this.#detailsElem = <HTMLDetailsElement>e('details', {open: true}, [
115 |       this.#summaryElem,
116 |     ]);
117 |     this.#windowElem = e('div', {className: 'window layout-scrollbar'}, [
118 |       this.#detailsElem,
119 |     ]);
120 | 
121 |     this.#settings = <WindowSettings>{rect: {}};
122 |     if (!settings.rect) {
123 |       settings.rect = <Rect>{};
124 |     }
125 | 
126 |     if (settings.rect.left === undefined) {
127 |       settings.rect.left = 10 + (windowCount * 25) % Math.max(window.innerWidth  - 300, 10);
128 |       settings.rect.top  = 10 + (windowCount * 25) % Math.max(window.innerHeight - 300, 10);
129 |       ++windowCount;
130 |     }
131 | 
132 |     if (settings.rect.width === undefined) {
133 |       settings.rect.width = 400;
134 |     }
135 | 
136 |     if (settings.rect.height === undefined) {
137 |       this.#needSize = true;
138 |     }
139 | 
140 |     const elem = this.#windowElem;
141 |     let mouseStartX: number;
142 |     let mouseStartY: number;
143 |     let elemStartX: number;
144 |     let elemStartY: number;
145 | 
146 |     const onMouseMove = (e: MouseEvent) => {
147 |       const deltaX = e.clientX - mouseStartX;
148 |       const deltaY = e.clientY - mouseStartY;
149 |       const rect = this.#settings.rect;
150 |       rect.left = elemStartX + deltaX;
151 |       rect.top = elemStartY + deltaY;
152 |       this.#windowElem.style.left = px(rect.left);
153 |       this.#windowElem.style.top = px(rect.top);
154 |       this.#haveNewSettings = true;
155 |     };
156 | 
157 |     const onMouseUp = (e: MouseEvent) => {
158 |       window.removeEventListener('mousemove', onMouseMove);
159 |       window.removeEventListener('mouseup', onMouseUp);
160 |     };
161 | 
162 |     this.#summaryElem.addEventListener('mousedown', (e) => {
163 |       window.addEventListener('mousemove', onMouseMove);
164 |       window.addEventListener('mouseup', onMouseUp);
165 |       mouseStartX = e.clientX;
166 |       mouseStartY = e.clientY;
167 |       const rect = elem.getBoundingClientRect();
168 |       elemStartX = rect.left | 0;
169 |       elemStartY = rect.top | 0;
170 |     });
171 | 
172 |     this.#summaryElem.addEventListener('click', (e) => {
173 |       //if (e.offsetX > 20) {
174 |         e.preventDefault();
175 |       //}
176 |       /*
177 |       this.#settings.active = !this.#settings.active;
178 |       this.#haveNewSettings = true;
179 |       */
180 |     });
181 | 
182 |     // FIX: We shouldn't use css:resize and resize observer.
183 |     // we should instead handle this ourselves
184 |     const onResize = () => {
185 |       if (!this.#haveNewSettings) {
186 |         const rect = this.#windowElem.getBoundingClientRect();
187 |         this.#settings.rect.width = rect.width;
188 |         this.#settings.rect.height = rect.height;
189 |         this.#haveNewSettings = true;
190 |       }
191 |     };
192 | 
193 |     const resizeObserver = new ResizeObserver(onResize);
194 |     resizeObserver.observe(this.#windowElem);
195 | 
196 |     // FIX: should probably go through some API, not directly to document
197 |     // document.body.appendChild(this.#windowElem);
198 |     // append to root so we can get better scrollbars
199 |     document.querySelector('#root').appendChild(this.#windowElem);
200 |     // FIX: this is a place holder because Node requires one
201 |     this.#context = new Context(this.#detailsElem, this.end);
202 |     this.#detailsElem.addEventListener('click', (e) => {
203 |       if (e.clientX > 20) {
204 |         e.preventDefault();
205 |       }
206 |       queueUpdate();
207 |     });
208 |   }
209 | 
210 |   remove() {
211 |     super.remove();
212 |     this.#windowElem.remove();
213 |   }
214 | 
215 |   update(settings: WindowSettings) {
216 |     if (this.#haveNewSettings) {
217 |       this.#haveNewSettings = false;
218 |       // FIX: got to be a better way
219 |       const rect = settings.rect;
220 |       Object.assign(settings, this.#settings);
221 |       settings.rect = rect;
222 |       Object.assign(rect, this.#settings.rect);
223 |       this._updateRect();
224 |     }
225 |     else
226 |     {
227 |       {
228 |         const title = settings.title;
229 |         if (this.#settings.title !== title) {
230 |           this.#settings.title = title;
231 |           this.#summaryElem.textContent = title;
232 |         }
233 |       }
234 |       {
235 |         const active = settings.active;
236 |         if (this.#settings.active !== active) {
237 |           this.#settings.active = active;
238 |           this.#detailsElem.open = !!active;
239 |           this._updateRect();
240 |         }
241 |       }
242 |       {
243 |         const rect = settings.rect;
244 |         if (!areRectsEqual(rect, this.#settings.rect)) {
245 |           {
246 |             const displayRect = this.#windowElem.getBoundingClientRect();
247 |             rect.left   = rect.left   === undefined ? displayRect.left   : rect.left;
248 |             rect.top    = rect.top    === undefined ? displayRect.top    : rect.top;
249 |             rect.width  = rect.width  === undefined ? displayRect.width  : rect.width;
250 |             rect.height = rect.height === undefined ? displayRect.height : rect.height;
251 |           }
252 |           Object.assign(this.#settings.rect, rect);
253 |           this._updateRect();
254 |         }
255 |       }
256 |     }
257 |   }
258 | 
259 |   _updateRect() {
260 |     const rect = this.#settings.rect;
261 |     this.#windowElem.style.width = px(rect.width);
262 |     this.#windowElem.style.height = this.#settings.active ? px(rect.height) : '';
263 |     this.#windowElem.style.left = px(rect.left);
264 |     this.#windowElem.style.top = px(rect.top);
265 |   }
266 | 
267 |   begin() {
268 |     Context.pushContext(this.#context);
269 |   }
270 | 
271 |   end = () => {
272 |     if (this.#needSize) {
273 |       this.#needSize = false;
274 |       if (this.#settings.rect.width === undefined) {
275 |         this.#settings.rect.width = this.#windowElem.scrollWidth;
276 |         this.#haveNewSettings = true;
277 |       }
278 |       // FIX: remove the 6
279 |       this.#settings.rect.height = this.#windowElem.scrollHeight + 6;
280 |       this.#haveNewSettings = true;
281 |     }
282 |     Context.popContext();
283 |   }
284 | }
285 | 
286 | export function begin(settings: WindowSettings) {
287 |   const node = context.getExistingNodeOrRemove<WindowNode>(WindowNode, settings);
288 |   node.update(settings);
289 |   node.begin();
290 | }
291 | 
292 | export function end() {
293 |   // Magic happen here. The context has a finish function registered
294 |   // by WindowNode.
295 |   context.finish();
296 | }
297 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "ESNext",
 4 |     "lib": ["ES2020", "DOM"],
 5 |     "noImplicitAny": true,
 6 |     "removeComments": false,
 7 |     "preserveConstEnums": true,
 8 |     "target": "ESNext",
 9 |     "outDir": "build",
10 |     "sourceMap": true
11 |   },
12 |   "include": ["src/**/*"],
13 |   "exclude": ["node_modules", "**/*.spec.ts"]
14 | }


--------------------------------------------------------------------------------