From 4e4136eb72479547c88c01cc2eca6679f64909ab Mon Sep 17 00:00:00 2001 From: yumoqing Date: Wed, 30 Oct 2024 17:56:50 +0800 Subject: [PATCH] bugfix --- bricks/css/bricks.css | 15 +++- bricks/dataviewer.js | 8 +++ bricks/menu.js | 2 +- bricks/message.js | 20 +----- bricks/modal.js | 2 +- bricks/popup.js | 162 ++++++++++++++++++++++++++++++++++++------ bricks/widget.js | 2 + 7 files changed, 165 insertions(+), 46 deletions(-) diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index f026bc2..7b8938d 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -46,8 +46,17 @@ body { grid-gap: 1px; } +.resizebox { + width: 10px; + height: 10px; + background-color: darkblue; + position: absolute; + bottom: 0; + right: 0; + cursor: se-resize; /* 改变鼠标指针样式 */ +} .popup { - display:none; + display: none; position: absolute; box-sizing: border-box; /* 包括边框在内计算宽度和高度 */ color: #111111; @@ -119,7 +128,7 @@ body { } .scroll { - overflow:scroll; + overflow: auto; } .vcontainer { @@ -149,7 +158,7 @@ body { .filler, .hfiller, .vfiller { flex: auto; flex-grow: 1; - overflow:hidden; + overflow:hidden; } .vfiller .vbox:last-child { diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js index 0f16600..03c0f33 100644 --- a/bricks/dataviewer.js +++ b/bricks/dataviewer.js @@ -215,6 +215,10 @@ bricks.DataViewer = class extends bricks.VBox { fs.push(this.fields[i]); } var f = new bricks.ModalForm({ + "widget":this, + "movable":true, + "resizable":true, + "archor":"cc", "width":"90%", "height":"70%", "submit_url":this.editable.new_data_url, @@ -239,6 +243,10 @@ bricks.DataViewer = class extends bricks.VBox { fields.push(f); } var f = new bricks.ModalForm({ + "widget":this, + "movable":true, + "resizable":true, + "archor":"cc", "width":"90%", "height":"70%", "submit_url":this.editable.update_data_url+'?id=' + record.id, diff --git a/bricks/menu.js b/bricks/menu.js index 85b80a0..f0a7d97 100755 --- a/bricks/menu.js +++ b/bricks/menu.js @@ -33,7 +33,7 @@ bricks.Menu = class extends bricks.VBox { } } var w = await bricks.widgetBuild(desc, this); - if (w){ + if (w && ! w.parent){ t.clear_widgets(); t.add_widget(w); } else { diff --git a/bricks/message.js b/bricks/message.js index 1eb2f5e..f71f59b 100644 --- a/bricks/message.js +++ b/bricks/message.js @@ -1,6 +1,6 @@ var bricks = window.bricks || {}; -bricks.Message = class extends bricks.Modal { +bricks.Message = class extends bricks.PopupWindow { /* { title: @@ -43,23 +43,5 @@ bricks.show_message = function(opts){ w.open(); } -bricks.PopupForm = class extends bricks.VBox { - /* - { - form:{ - } - } - */ - constructor(options){ - super(options); - this.form = new bricks.Form(this.opts.form); - this.add_widget(this.form); - this.form.bind('submit', this.close_popup.bind(this)); - this.form.bind('discard', this.close_popup.bind(this)); - } - close_popup(e){ - this.dismiss(); - } -} bricks.Factory.register('Message', bricks.Message); bricks.Factory.register('Error', bricks.Error); diff --git a/bricks/modal.js b/bricks/modal.js index a83f7f1..e1f8695 100755 --- a/bricks/modal.js +++ b/bricks/modal.js @@ -167,7 +167,7 @@ bricks.Modal = class extends bricks.BaseModal { */ } -bricks.ModalForm = class extends bricks.Modal { +bricks.ModalForm = class extends bricks.PopupWindow { /* { auto_open: diff --git a/bricks/popup.js b/bricks/popup.js index 02fa3a2..6e5c51b 100644 --- a/bricks/popup.js +++ b/bricks/popup.js @@ -4,12 +4,14 @@ bricks.Popup = class extends bricks.VBox { /* { timeout:0 - auto_open: archor:one of ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl','bc', 'br'] widget:null for bricks.Body, string value for widget's id or a widget object; - auto_dismiss: - auto_destroy: - movable: + auto_open:boolean + auto_dismiss:boolean + auto_destroy:boolean + movable:boolean + resizable:boolean + modal:boolean */ constructor(opts){ super(opts); @@ -24,12 +26,66 @@ bricks.Popup = class extends bricks.VBox { if (this.auto_dismiss){ bricks.Body.bind('click', this.click_outside.bind(this)); } + this.target_w = bricks.Body; this.moving_status = false; if (this.movable){ this.setup_movable(); - console.log('movable ...'); + // console.log('movable ...'); } + if (this.resizable){ + this.setup_resizable(); + } + this.set_style('display', 'none'); + bricks.Body.add_widget(this); } + setup_resizable(){ + this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')}); + this.old_add_widget(this.resizable_w); + this.resizable_w.set_css('resizebox'); + this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this)); + bricks.Body.bind('mousemove', this.resizing.bind(this)); + bricks.Body.bind('mouseup', this.stop_resizing.bind(this)); + } + resize_start_pos(e){ + if (e.target != this.resizable_w.dom_element) + { + // console.log('not event target'); + return; + } + var rect = this.showRectage(); + this.resize_status = true; + this.s_offsetX = e.clientX; + this.s_offsetY = e.clientY; + this.s_width = rect.width; + this.s_height = rect.height; + e.preventDefault(); + // console.log('resize_start_pos():', this.s_width, this.s_height, this.s_offsetX, this.s_offsetY); + } + resizing(e){ + if (e.target != this.resizable_w.dom_element){ + this.stop_resizing(); + // console.log('resizing(): not event target'); + return; + } + if (!this.resize_status){ + // console.log('resizing(): not in resize status'); + return; + } + var cx, cy; + cx = this.s_width + e.clientX - this.s_offsetX; + cy = this.s_height + e.clientY - this.s_offsetY; + this.set_style('width', cx + 'px'); + this.set_style('height', cy + 'px'); + // console.log('resizing():', this.resize_status, cx, cy); + e.preventDefault(); + } + stop_resizing(e){ + this.resize_status = false; + bricks.Body.unbind('mousemove', this.resizing.bind(this)); + bricks.Body.unbind('mouseup', this.stop_resizing.bind(this)); + // console.log('stop_resizing():', this.resize_status); + } + setup_movable(){ this.moving_w.bind('mousedown', this.rec_start_pos.bind(this)); this.moving_w.bind('touchstart', this.rec_start_pos.bind(this)); @@ -37,7 +93,7 @@ bricks.Popup = class extends bricks.VBox { rec_start_pos(e){ if (e.target != this.moving_w.dom_element) { - console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference ...'); + // console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference ...'); return; } this.moving_status = true; @@ -48,15 +104,15 @@ bricks.Popup = class extends bricks.VBox { this.moving_w.bind('mousemove', this.moving.bind(this)); this.moving_w.bind('touchmove', this.moving.bind(this)); e.preventDefault(); - console.log('moving started ...'); + // console.log('moving started ...'); } moving(e){ if (e.target != this.moving_w.dom_element){ - console.log('moving failed', e.target, this.moving_w.dom_element, 'difference ...'); + // console.log('moving failed', e.target, this.moving_w.dom_element, 'difference ...'); this.stop_moving(); } if (!this.moving_status){ - console.log('moving failed', 'not started ...'); + // console.log('moving failed', 'not started ...'); return; } var cx, cy; @@ -66,7 +122,7 @@ bricks.Popup = class extends bricks.VBox { this.set_style('top', cy + 'px'); } stop_moving(e){ - console.log('stop moving ....'); + // console.log('stop moving ....'); this.moving_status = false; this.moving_w.unbind('mousemove', this.moving.bind(this)); this.moving_w.unbind('touchmove', this.moving.bind(this)); @@ -95,31 +151,34 @@ bricks.Popup = class extends bricks.VBox { } } open(){ - var rect; + var rect, w, h; if (this.opened) { return; } this.opened = true; if (this.widget instanceof bricks.JsWidget){ - rect = this.widget.showRectage() + this.target_w = this.widget; this.issub = true; } else { var w = bricks.getWidgetById(this.widget, bricks.Body); if (w){ this.issub = true - rect = w.showRectage(); - } else { - rect = bricks.Body.showRectage(); - } + this.target_w = w; + } } + rect = this.target_w.showRectage(); var lt = archor_at(this.archor); if (this.issub){ lt = this.transform2screen_at(rect, lt); - if (this.width && this.width.endsWith('%')){ - this.set_style('width', parseFloat(rect.width) * parseFloat(this.width) + 'px'); + if (typeof(this.width) == 'string' && this.width.endsWith('%')){ + w = parseFloat(rect.width) * parseFloat(this.width) / 100; + this.set_style('width', w + 'px'); + console.log('rect=', rect, 'w=', w); } - if (this.height && this.height.endsWith('%')){ - this.set_style('height', parseFloat(rect.height) * parseFloat(this.height) + 'px'); + if (typeof(this.height) == 'string' && this.height.endsWith('%')){ + h = parseFloat(rect.height) * parseFloat(this.height) / 100; + this.set_style('height', h + 'px'); + console.log('rect=', rect, 'h=', h); } } this.set_style('top',lt.top); @@ -128,8 +187,14 @@ bricks.Popup = class extends bricks.VBox { if (this.timeout > 0){ this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout) } + if (this.opts.modal){ + this.target_w.disabled(true); + } } dismiss(){ + if (this.opts.modal){ + this.target_w.disabled(false); + } this.opened = false; if (this.auto_task){ this.auto_task.cancel(); @@ -141,6 +206,9 @@ bricks.Popup = class extends bricks.VBox { } } destroy(){ + if (this.opened){ + this.dismiss(); + } if (this.parent){ this.parent.remove_widget(this); this.parent = null; @@ -149,19 +217,45 @@ bricks.Popup = class extends bricks.VBox { } bricks.PopupWindow = class extends bricks.Popup { + /* + { + title: + icon: + params: + url: + } + */ constructor(opts){ super(opts); this.title_bar = new bricks.HBox({cheight:1, width:'100%'}); this.title_bar.set_css('titlebar') - this.content_w = new bricks.Filler({}); this.auto_destroy = false; this.moving_w = this.title_bar; this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this); this.old_add_widget(this.title_bar); - this.old_add_widget(this.content_w); this.build_title_bar(); + var filler = new bricks.Filler({}); + this.old_add_widget(filler) + this.content_w = new bricks.VScrollPanel({width:"100%"}); + filler.add_widget(this.content_w); + } + async load_content(){ + var dic = { + "widgettype":"urlwidget", + "options":{ + "params":this.params, + "url":this.url + } + } + var w = bricks.widgetBuild(dic, bricks.Body); + this.add_widget(w); } build_title_bar(){ + var icon = new bricks.Icon({ + rate:this.opts.rate, + url:this.opts.icon || bricks_resource('imgs/app.png') + }); + this.title_bar.add_widget(icon); this.tb_w = new bricks.IconBar( { cheight:1, margin:'5px', @@ -191,6 +285,15 @@ bricks.PopupWindow = class extends bricks.Popup { this.tb_w.bind('delete', this.destroy.bind(this)); this.tb_w.bind('minimax', this.dismiss.bind(this)); this.tb_w.bind('fullscreen', this.enter_fullscreen.bind(this)); + if (this.title){ + this.title_w = new bricks.Text({text:this.title}); + this.title_bar.add_widget(this.title_w); + } + } + set_title(txt){ + if (this.title_w){ + this.title_w.set_text(txt); + } } add_widget(w, index){ this.content_w.add_widget(w, index); @@ -216,6 +319,21 @@ bricks.PopupWindow = class extends bricks.Popup { super.dismiss() } } +bricks.Dock = class extends bricks.HBox { + constructor(opts){ + opts.cheight = opts.cheight || 2; + opts.width = opts.width || "80%"; + super(opts); + this.set_css('scroll'); + this.pw = []; + } + add_popupwindow(pw){ + var info = pw.get_window_info(); + + } + del_popupwindow(pw){ + } +} bricks.Factory.register('Popup', bricks.Popup); bricks.Factory.register('PopupWindow', bricks.PopupWindow); diff --git a/bricks/widget.js b/bricks/widget.js index ef72f5e..5566ee7 100755 --- a/bricks/widget.js +++ b/bricks/widget.js @@ -65,8 +65,10 @@ bricks.JsWidget = class { disabled(flag){ if(flag){ this.dom_element.disabled = true; + this.set_style('pointerEvents', 'none'); } else { this.dom_element.disabled = false; + this.set_style('pointerEvents', 'auto'); } } opts_set_style(){