Merge branch 'inputs-as-litelement'

* inputs-as-litelement:
  X11TEST: play-notes.json: adjust recording for new web components
  ASE: server.cc: listen on "notify" emissions from properties
  ASE: properties.cc: fix notifications, emit notify:identifier
  UI: util.js: turn xprop.value_ into a reactive property
  UI: b/choiceinput.js: take b-objecteditor into account in CSS
  UI: b/pro-input.vue: use @valuechange on b-choiceinput
  UI: b/preferencesdialog.vue: use b-objecteditor
  UI: util.js: avoid extending the same property twice
  UI: util.js: export fullstop()
  UI: Makefile.mk: use tsc with --pretty false only inside emacs
  UI: b/objecteditor.js: port to LitComponent
	* Turn into shadowless component
	* Properly prefix CSS classes
	* Listen on and handle @valuechange events
	* Do not freeze extended properties that we keep mutating
	* Remove old resize blocker logic
  UI: startup.js: load basic custom components early on
  UI: b/basics.js: move h-flex, v-flex, c-grid, push-button here, shadowless
	Make these simple basic containers shadowless, i.e. without shadow root.
  UI: b/pro-input.vue: add support for b-choiceinput
  UI: little.js: export 'nothing' from Lit
  UI: types.d.ts: add debug() global
  UI: b/fed-object.vue: add support for b-choiceinput
  UI: b/choiceinput.js: port to LitComponent, render on demand only
  UI: b/tracklist.js: fix stacking of top border shadow
  UI: b/switchinput.js: allow LEFT/RIGHT/UP/DOWN to toggle
  UI: b/fed-object.vue: add support for b-switchinput
  UI: b/switchinput.js: port to LitComponent
  UI: types.d.ts: declare global CONFIG
  UI: b/fed-object.vue: add support for b-numberinput
  UI: b/numberinput.js: simplify and fix sizing
  UI: b/numberinput.js: port to LitComponent
  UI: b/textinput.js: dispatch value changes as valuechange "event"

Signed-off-by: Tim Janik <[email protected]>

ase/properties.cc

@@ -98,7 +98,7 @@ JSONIPC_INHERIT (LambdaPropertyImpl, Property);
 void
 LambdaPropertyImpl::notify()
 {
-  emit_event ("change", identifier());
+  emit_notify (identifier());
 }
 
 Value
@@ -204,7 +204,7 @@ void
 Bag::on_events (const String &eventselector, const EventHandler &eventhandler)
 {
   for (auto p : props)
-    connections.push_back (p->on_event ("change", eventhandler));
+    connections.push_back (p->on_event (eventselector, eventhandler));
 }
 
 } // Properties

ase/server.cc

@@ -94,7 +94,7 @@ Preferences::access_properties (const EventHandler &eventhandler)
   bag += Text (&plugin_path, _("Plugin Path"), "", STANDARD + "searchpath",
                _("Search path of directories, seperated by \";\", used to find plugins. This path "
                  "is searched for in addition to the standard plugin location on this system."));
-  bag.on_events ("change", eventhandler);
+  bag.on_events ("notify", eventhandler);
   return bag.props;
 }
 

ui/Makefile.mk

@@ -336,7 +336,7 @@ $>/.tscheck.done: ui/types.d.ts ui/tsconfig.json $(ui/tscheck.deps) ui/Makefile.
 	$(QECHO) RUN tscheck
 	$Q cp ui/tsconfig.json ui/types.d.ts $>/ui/
 	@ # tsc *.js needs to find node_modules/ in the directory hierarchy ("moduleResolution": "node")
-	-$Q cd $>/ && node_modules/.bin/tsc -p ui/tsconfig.json --pretty false |& ../misc/colorize.sh
+	-$Q cd $>/ && node_modules/.bin/tsc -p ui/tsconfig.json $${INSIDE_EMACS:+--pretty false}
 	$Q touch $@
 $>/ui/.build2-stamp: $>/.tscheck.done
 tscheck: $>/node_modules/.npm.done

ui/b/basics.js

@@ -0,0 +1,78 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { JsExtract } from '../little.js';
+import * as Util from '../util.js';
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+
+h-flex {
+  display: flex; flex-basis: auto; flex-direction: row;
+  flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
+h-flex[inline] { display: inline-flex; }
+
+v-flex {
+  display: flex; flex-basis: auto; flex-direction: column;
+  flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
+v-flex[inline] { display: inline-flex; }
+
+c-grid { display: grid; }
+c-grid[inline] { display: inline-grid; }
+`;
+
+/** # PUSH-BUTTON - wrapper for an ordinary HTMLElement */
+class PushButton extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('push-button', PushButton);
+
+// Util.add_style_sheet (this, STYLE_URL);
+
+/** # B-HFLEX
+ * Horizontal [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) container element.
+ */
+class HFlex extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('h-flex', HFlex);
+
+/** # B-VFLEX
+ * Vertical [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) container element.
+ */
+class VFlex extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('v-flex', VFlex);
+
+/** # B-CGRID
+ * Simple [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) container element.
+ * See also [Grid Container](https://www.w3.org/TR/css-grid-1/#grid-containers)
+ * [Grid visual cheatsheet](http://grid.malven.co/)
+ */
+class CGrid extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('c-grid', CGrid);