From 96821a2b016ae9dd23830fa4adb9b0474101af54 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Sun, 25 Feb 2024 12:31:02 +0800 Subject: [PATCH] bugfix --- bricks/bricks.js | 12 ++-- bricks/build.sh | 2 +- bricks/css/bricks.css | 29 +++++++-- bricks/dataviewer.js | 2 +- bricks/layout.js | 10 +++ bricks/tree.js | 12 ++-- bricks/utils.js | 19 +++++- bricks/widget.js | 7 ++ examples/tree.json | 145 +++++++++++++++++++++++++++++++++++++++--- 9 files changed, 209 insertions(+), 29 deletions(-) diff --git a/bricks/bricks.js b/bricks/bricks.js index 5603984..0c2a939 100755 --- a/bricks/bricks.js +++ b/bricks/bricks.js @@ -73,17 +73,17 @@ bricks.widgetBuild = async function(desc, widget){ if (! widget){ widget = bricks.Body; } - const klassname = desc.widgettype; - var base_url = null; - if (klassname == 'urlwidget'){ + var klassname = desc.widgettype; + var base_url = widget.baseURI; + while (klassname == 'urlwidget'){ let url = absurl(desc.options.url, widget); base_url = url; let method = desc.options.method || 'GET'; let opts = desc.options.params || {}; var jcall = bricks.jcall; - desc = await jcall(url, { "method":method, "params":opts}); - } else { - base_url = widget.baseURI; + var desc1 = await jcall(url, { "method":method, "params":opts}); + desc = desc1; + klassname = desc.widgettype; } let klass = bricks.Factory.get(desc.widgettype); if (! klass){ diff --git a/bricks/build.sh b/bricks/build.sh index 1d8c9ab..657aa20 100755 --- a/bricks/build.sh +++ b/bricks/build.sh @@ -5,7 +5,7 @@ SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \ input.js registerfunction.js button.js accordion.js \ tree.js multiple_state_image.js form.js message.js \ paging.js datagrid.js dataviewer.js \ - miniform.js wterm.js " + miniform.js wterm.js dynamicaccordion.js " echo ${SOURCES} cat ${SOURCES} > ../dist/bricks.js # uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 87e1d36..ad0dce2 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -1,8 +1,10 @@ html, body { height: 100%; + width: 100%; margin: 0; overflow: auto; + display: flex; } .griddata { @@ -66,8 +68,7 @@ body { .vcontainer { display: flex; flex-direction: column; - height:100%; - scroll:auto; + // overflow:auto; } .vbox { @@ -78,8 +79,7 @@ body { .hcontainer { display: flex; flex-direction: row; - width:100%; - scroll:auto; + // overflow:auto; } .hbox { @@ -93,7 +93,7 @@ body { .filler, .hfiller, .vfiller { flex: auto; - scroll:auto; + // overflow:auto; } .vfiller .vbox:last-child { @@ -252,3 +252,22 @@ div[tooltip] { display: flex; flex-direction: column; } + +/* Flex 布局 */ +.accordion { + display: flex; + flex-direction: column; +} +.accordion-item { + border: 1px solid #ccc; + margin-bottom: 5px; +} +.accordion-item-header { + padding: 10px; + background-color: #f0f0f0; + cursor: pointer; +} +.accordion-item-content { + padding: 10px; + background-color: #ffffff; +} diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js index 9290c24..0ccc9fd 100644 --- a/bricks/dataviewer.js +++ b/bricks/dataviewer.js @@ -54,7 +54,7 @@ bricks.DataViewer = class extends bricks.VScrollPanel { } } add_row = async function(row, direction){ - var s = obj_fmtstr(row, this.viewer_tmpl); + var s = bricks.obj_fmtstr(row, this.viewer_tmpl); var desc = JSON.parse(s); var w = await bricks.widgetBuild(desc, this); if (! w){ diff --git a/bricks/layout.js b/bricks/layout.js index 638383d..7ec05e8 100755 --- a/bricks/layout.js +++ b/bricks/layout.js @@ -72,9 +72,18 @@ bricks.VBox = class extends bricks.Layout { } } +bricks.Filler = class extends bricks.Layout { + constructor(options){ + super(options); + this.set_style('flexGrow', 1); + this.set_style('overflow', 'auto'); + } +} + bricks.VFiller = class extends bricks.Layout { constructor(options){ super(options); + this.set_css('vfiller'); } } @@ -95,6 +104,7 @@ bricks.HFiller = class extends bricks.Layout { bricks.Factory.register('HBox', bricks.HBox); bricks.Factory.register('VBox', bricks.VBox); +bricks.Factory.register('Filler', bricks.Filler); bricks.Factory.register('HFiller', bricks.HFiller); bricks.Factory.register('VFiller', bricks.VFiller); diff --git a/bricks/tree.js b/bricks/tree.js index 8f1e631..0aae329 100755 --- a/bricks/tree.js +++ b/bricks/tree.js @@ -4,7 +4,6 @@ bricks.TreeNode = class extends bricks.VBox { var opts = { width:'100%', height:'auto', - overflow:'hidden' } super(opts); this.tree = tree; @@ -17,8 +16,7 @@ bricks.TreeNode = class extends bricks.VBox { this.params['type'] = this.data[this.tree.opts.typeField]; } var n = new bricks.HBox({ - height:'auto', - overflow:'hidden', + height:this.tree.row_height, width:'100%' }) n.dom_element.style.margin = bricks.app.charsize * 0.2; @@ -27,7 +25,7 @@ bricks.TreeNode = class extends bricks.VBox { this.node_widget = n; this.create_node_content(n); if (! this.data.is_leaf) { - this.container = new bricks.VBox({height:'auto', overflow:'hidden'}); + this.container = new bricks.VBox({height:'auto'}); this.add_widget(this.container); this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px'; if (this.data.children){ @@ -155,7 +153,11 @@ bricks.Tree = class extends bricks.VScrollPanel { this.multitype_tree = this.opts.multitype_tree||false; this.selected_node = null; this.create_toolbar(); - this.container = this; + this.container = new bricks.VBox({ + "width":"100%", + "height":"auto", + "overflow":"auto" + }); this.add_widget(this.container); this.data_id = null; if (this.opts.dataurl){ diff --git a/bricks/utils.js b/bricks/utils.js index 2bc4aae..6612ec3 100755 --- a/bricks/utils.js +++ b/bricks/utils.js @@ -136,7 +136,7 @@ var objget = function(obj, key, defval){ return defval; } -var obj_fmtstr = function(obj, fmt){ +bricks.obj_fmtstr = function(obj, fmt){ /* fmt like 'my name is ${name}, ${age=}' '${name:}, ${age=}' @@ -201,7 +201,7 @@ var archorize = function(ele,archor){ 'x':x, 'y':y } - var tsf = obj_fmtstr(o, 'translateY(-${y}) translateX(-${x})'); + var tsf = bricks.obj_fmtstr(o, 'translateY(-${y}) translateX(-${x})'); console.log('archorize(): tsf=', tsf); ele.style.transform = tsf; ele.style.position = "absolute"; @@ -307,3 +307,18 @@ bricks.playResponseAudio = async function(response, target){ widget.set_url(url); widget.play(); } + +bricks.widgetBuildWithData = async function(desc_tmpl, from_widget, data){ + if (!desc_tmpl){ + console.log('bricks.widgetBuildWithData():data=', data, 'desc_tmpl=', desc_tmpl); + } + var s = bricks.obj_fmtstr(data, desc_tmpl); + var desc = JSON.parse(s); + var w = await bricks.widgetBuild(desc, from_widget); + if (! w){ + console.log(desc, 'widgetBuild() failed...........'); + return; + } + w.row_data = data; + return w; +} diff --git a/bricks/widget.js b/bricks/widget.js index 34a7247..8d37b45 100755 --- a/bricks/widget.js +++ b/bricks/widget.js @@ -181,6 +181,13 @@ bricks.JsWidget = class { hide(){ this.dom_element.style.display = 'none' } + toggle_hide(){ + if (this.dom_element.style.display == 'none'){ + this.show(); + } else { + this.hide(); + } + } bind(eventname, handler){ this.dom_element.addEventListener(eventname, handler); } diff --git a/examples/tree.json b/examples/tree.json index 1eae734..70830a9 100644 --- a/examples/tree.json +++ b/examples/tree.json @@ -48,14 +48,42 @@ "id":13, "text":"node13", "is_leaf":true - } - ] - }, - { - "id":2, - "text":"node2", - "is_leaf":false, - "children":[ + }, + { + "id":14, + "text":"node14", + "is_leaf":true + }, + { + "id":15, + "text":"node15", + "is_leaf":true + }, + { + "id":16, + "text":"node16", + "is_leaf":true + }, + { + "id":17, + "text":"node17", + "is_leaf":true + }, + { + "id":18, + "text":"node18", + "is_leaf":true + }, + { + "id":19, + "text":"node19", + "is_leaf":true + }, + { + "id":20, + "text":"node20", + "is_leaf":true + }, { "id":21, "text":"node21", @@ -70,13 +98,112 @@ "id":23, "text":"node23", "is_leaf":true + }, + { + "id":24, + "text":"node24", + "is_leaf":true + }, + { + "id":25, + "text":"node25", + "is_leaf":true + }, + { + "id":26, + "text":"node26", + "is_leaf":true + }, + { + "id":27, + "text":"node27", + "is_leaf":true + }, + { + "id":28, + "text":"node28", + "is_leaf":true + }, + { + "id":29, + "text":"node29", + "is_leaf":true + }, + { + "id":30, + "text":"node30", + "is_leaf":true + }, + { + "id":31, + "text":"node31", + "is_leaf":true + }, + { + "id":32, + "text":"node32", + "is_leaf":true + }, + { + "id":33, + "text":"node33", + "is_leaf":true + }, + { + "id":34, + "text":"node34", + "is_leaf":true + }, + { + "id":35, + "text":"node35", + "is_leaf":true + }, + { + "id":36, + "text":"node36", + "is_leaf":true + } + ] + }, + { + "id":2, + "text":"node2", + "is_leaf":false, + "children":[ + { + "id":221, + "text":"node221", + "is_leaf":true + }, + { + "id":222, + "text":"node222", + "is_leaf":true + }, + { + "id":223, + "text":"node223", + "is_leaf":true } ] }, { "id":3, "text":"node3", - "is_leaf":true + "is_leaf":false, + "children":[ + { + "id":"3-1", + "text":"node3112", + "is_leaf":true + }, + { + "id":"3-2", + "text":"node313", + "is_leaf":true + } + ] } ] }