bugfix

bricks/bricks.js

@@ -446,6 +446,7 @@ bricks.App = class extends bricks.Layout {
 		bricks.Body = this;
 		this.login_url = opts.login_url;
 		this.charsize = this.opts.charsize || 20;
+		this.keyevent_blocked = false;
 		this.char_size = this.observable('charsize', this.charsize);
 		if (this.opts.language){
 			this.lang = this.opts.language;
@@ -461,6 +462,7 @@ bricks.App = class extends bricks.Layout {
 		this.add_widget(this.tooltip);
 		this._Width = this.dom_element.offsetWidth;
 		this._Height = this.dom_element.offsetHeight;
+		document.addEventListener('keydown', this.key_down_action.bind(this));
 	}
 	create(){
 		this.dom_element = document.getElementsByTagName('body')[0];
@@ -519,4 +521,19 @@ bricks.App = class extends bricks.Layout {
 		await (this.i18n.change_lang(lang));
 		this.lang_x.set(this.lang);
 	}
+	async key_down_action(event){
+		if (this.keyevent_blocked){
+			return;
+		}
+		var d = {
+			key:event.key,
+			repeat:event.repeat,
+			altkey:event.altKey,
+			ctrlkey:event.ctrlKey,
+			shiftkey:event.shiftKey,
+			metakey:event.metaKey,
+			code:event.code
+		}
+		this.dispatch('keydown', d);
+	}
 }

bricks/layout.js

@@ -114,6 +114,32 @@ bricks.FVBox = class extends bricks.VBox {
 		this.set_style('flexWrap', 'nowrap');
 	}
 }
+
+bricks.ResponsableBox = class extends bricks.Layout {
+	constructor(opts){
+		super(opts);
+		
+		this.bind('element_resize', this.reset_type.bind(this));
+	}
+	reset_type(event){
+		var w = this.dom_element.clientWidth;
+		var h = this.dom_element.clientHeight;
+		var cr = event.params;
+		console.log('size changed', w, h, cr);
+		if (w > h) {
+			this.set_css('vcontainer', true);
+			this.set_css('hcontainer');
+			this.set_style('width', 'auto');
+			this.set_style('height', '100%');
+			
+		} else {
+			this.set_css('vcontainer');
+			this.set_css('hcontainer', true);
+			this.set_style('height', 'auto');
+			this.set_style('width', '100%');
+		}
+	}
+}
 bricks.Factory.register('HBox', bricks.HBox);
 bricks.Factory.register('FHBox', bricks.FHBox);
 bricks.Factory.register('VBox', bricks.VBox);
@@ -121,4 +147,4 @@ bricks.Factory.register('FVBox', bricks.FVBox);
 bricks.Factory.register('Filler', bricks.Filler);
 bricks.Factory.register('HFiller', bricks.Filler);
 bricks.Factory.register('VFiller', bricks.Filler);
-
+bricks.Factory.register('ResponsableBox', bricks.ResponsableBox);

bricks/myvad.js

@@ -0,0 +1,30 @@
+/*
+<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
+<script>
+  async function main() {
+    const myvad = await vad.MicVAD.new({
+      onSpeechEnd: (audio) => {
+        // do something with `audio` (Float32Array of audio samples at sample rate 16000)...
+      },
+    })
+    myvad.start()
+  }
+  main()
+</script>
+*/
+
+var bricks = window.bricks || {};
+bricks.enable_vad = async function(func){
+	/*
+	func accept one argument "audio"(float32array of audio samples at sample rate 16000)
+	*/
+	bricks.vad = await vad.MicVAD.new({
+		onSpeechEnd:func
+	});
+	bricks.vad.start();
+}
+bricks.disable_vad = async function(){
+	bricks.vad.stop();
+	bricks.vad = null;
+}

bricks/tree_choose.js

@@ -0,0 +1,11 @@
+var  bricks = window.bricks || {};
+
+bricks.TreeChoose = class extends bricks.VBox {
+	/*
+	{
+	}
+	*/
+	constructor(opts){
+		super(opts);
+		
+}

bricks/vision.js

@@ -0,0 +1,5 @@
+bricks = window.bricks || {}
+
+bricks.Vision = class extend bricks.Layout {
+
+}

bricks/widget.js

@@ -1,4 +1,19 @@
 var bricks = window.bricks || {};
+/* 
+We use ResizeObserver to implements dom object resize event
+*/
+bricks.resize_observer = new ResizeObserver(entries => {
+	for (let entry of entries){
+		const cr = entry.contentRect;
+		const ele = entry.target;
+		const w = ele.bricks_widget;
+		// console.log('size=', cr, 'element=', ele, w);
+		if (w){
+			w.dispatch('element_resize', cr);
+		}
+	}
+});
+
 bricks.JsWidget = class {
 	constructor(options){
 		if (!options){
@@ -24,6 +39,10 @@ bricks.JsWidget = class {
 			this.bind('mousemove', w.show.bind(w, this.opts.tip));
 			this.bind('mouseout', w.hide.bind(w));
 		}
+		bricks.resize_observer.observe(this.dom_element);
+	}
+	is_in_dom(){
+		return document.contains(this.dom_element);
 	}
 	getUserData(){
 		return this.user_data || null;
@@ -311,6 +330,42 @@ bricks.Text = class extends bricks.TextBase {
 	}
 }
 
+bricks.KeyinText = class extends bricks.Text {
+	constructor(opts){
+		super(opts);
+		if (! this.name) {
+			this.name = 'data';
+		}
+		bricks.app.bind('keydown', this.key_down_action.bind(this))
+	}
+	key_down_action(event){
+		var kdic = event.params;
+		switch (kdic.key) {
+			case 'Delete':
+				this.set_text('');
+				this.dispatch_changed();
+				break;
+			case 'Backspace':
+				var s = this.text.substring(0, this.text.length - 1);
+				this.set_text(s);
+				this.dispatch_changed();
+				break;
+			default:
+				if (kdic.key.length == 1){
+					var txt = this.text + kdic.key;
+					this.set_text(txt);
+					this.dispatch_changed();
+				}
+				break;
+		}
+	}
+	dispatch_changed(){
+		var d = {};
+		d[this.name] = this.text;
+		this.dispatch('changed', d);
+	}
+}
+
 bricks.Title1 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
@@ -412,6 +467,7 @@ bricks.Tooltip = class extends bricks.Text {
 
 bricks.Factory.register('Tooltip', bricks.Tooltip);
 bricks.Factory.register('Text', bricks.Text);
+bricks.Factory.register('KeyinText', bricks.KeyinText);
 bricks.Factory.register('Title1', bricks.Title1);
 bricks.Factory.register('Title2', bricks.Title2);
 bricks.Factory.register('Title3', bricks.Title3);

examples/keyevent.ui

@@ -0,0 +1,21 @@
+{
+	"widgettype":"VBox",
+	"options":{
+		"overflow":"auto",
+		"width":"100%",
+		"height":"100%",
+	},
+	"binds":[
+		{
+			"wid":"app",
+			"event":"keydown",
+			"actiontype":"urlwidget",
+			"target":"self",
+			"mode":"append",
+			"options":{
+				"params":{},
+				"url":"{{entire_url('./keytext.ui')}}"
+			}
+		}
+	]
+}

examples/keytext.ui

@@ -0,0 +1,7 @@
+{
+	"widgettype":"Text",
+	"options":{
+		"text":"{{quotedstr(json.dumps(params_kw))}}",
+		"wrap":true
+	}
+}

examples/responsablebox.ui

@@ -0,0 +1,44 @@
+{
+	"widgettype":"ResponsableBox",
+	"options":{
+		"width":"100%",
+		"height":"100%",
+		"overflow":"auto",
+		"bgcolor":"#6f6f6f"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"VBox",
+			"options":{
+				"width":"300px",
+				"height":"300px",
+				"bgcolor":"#f9f9f9",
+				"color":"#3f3f3f",
+				"flexShrink":0,
+				"margin":"4px"
+			}
+		},
+		{
+			"widgettype":"VBox",
+			"options":{
+				"width":"300px",
+				"height":"300px",
+				"bgcolor":"#f9f9f9",
+				"color":"#3f3f3f",
+				"flexShrink":0,
+				"margin":"4px"
+			}
+		},
+		{
+			"widgettype":"VBox",
+			"options":{
+				"width":"300px",
+				"height":"300px",
+				"bgcolor":"#f9f9f9",
+				"color":"#3f3f3f",
+				"flexShrink":0,
+				"margin":"4px"
+			}
+		}
+	]
+}