diff --git a/bricks/bricks.js b/bricks/bricks.js index 45fa558..83e72b6 100755 --- a/bricks/bricks.js +++ b/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); + } } diff --git a/bricks/layout.js b/bricks/layout.js index 0c9895d..8e1a82d 100755 --- a/bricks/layout.js +++ b/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); diff --git a/bricks/myvad.js b/bricks/myvad.js new file mode 100644 index 0000000..59df593 --- /dev/null +++ b/bricks/myvad.js @@ -0,0 +1,30 @@ +/* + + + +*/ + +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; +} diff --git a/bricks/tree_choose.js b/bricks/tree_choose.js new file mode 100644 index 0000000..70c4b09 --- /dev/null +++ b/bricks/tree_choose.js @@ -0,0 +1,11 @@ +var bricks = window.bricks || {}; + +bricks.TreeChoose = class extends bricks.VBox { + /* + { + } + */ + constructor(opts){ + super(opts); + +} diff --git a/bricks/vision.js b/bricks/vision.js new file mode 100644 index 0000000..125b5ee --- /dev/null +++ b/bricks/vision.js @@ -0,0 +1,5 @@ +bricks = window.bricks || {} + +bricks.Vision = class extend bricks.Layout { + +} diff --git a/bricks/widget.js b/bricks/widget.js index e557164..5e5d623 100755 --- a/bricks/widget.js +++ b/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); diff --git a/examples/keyevent.ui b/examples/keyevent.ui new file mode 100644 index 0000000..3daa775 --- /dev/null +++ b/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')}}" + } + } + ] +} diff --git a/examples/keytext.ui b/examples/keytext.ui new file mode 100644 index 0000000..4a7a8ac --- /dev/null +++ b/examples/keytext.ui @@ -0,0 +1,7 @@ +{ + "widgettype":"Text", + "options":{ + "text":"{{quotedstr(json.dumps(params_kw))}}", + "wrap":true + } +} diff --git a/examples/responsablebox.ui b/examples/responsablebox.ui new file mode 100644 index 0000000..403d4ff --- /dev/null +++ b/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" + } + } + ] +}