From 53a31a15913f7e71e062f20cfa34319b6b7554f1 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Thu, 20 Jun 2024 17:35:25 +0800 Subject: [PATCH] bugfix --- bricks/form.js | 3 +++ bricks/image.js | 18 ++++++++++++++++ bricks/input.js | 51 +++++++++++++++++++++++++++++++++++++++++++++- bricks/jsoncall.js | 1 + bricks/llm.js | 11 +++++----- bricks/modal.js | 1 - bricks/tab.js | 6 ++---- bricks/widget.js | 16 ++++++++++----- examples/form.ui | 8 ++++++++ 9 files changed, 99 insertions(+), 16 deletions(-) diff --git a/bricks/form.js b/bricks/form.js index 444b6bf..ad709e2 100644 --- a/bricks/form.js +++ b/bricks/form.js @@ -83,6 +83,9 @@ bricks.FormBody = class extends bricks.VScrollPanel { this.fg = new bricks.FieldGroup({}); this.fg.build_fields(form, this, form.opts.fields) } + create(){ + this.dom_element = this._create('form') + } } bricks.Form = class extends bricks.VBox { diff --git a/bricks/image.js b/bricks/image.js index fdad73b..6eabf1d 100755 --- a/bricks/image.js +++ b/bricks/image.js @@ -28,6 +28,24 @@ bricks.Image = class extends bricks.JsWidget { this.dom_element.style.height = this.height; } } + base64(){ + const image = this.dom_element; + // 创建一个画布来绘制图像 + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // 设置画布大小与图像相同 + canvas.width = image.width; + canvas.height = image.height; + + // 将图像绘制到画布上 + ctx.drawImage(image, 0, 0); + + // 获取画布数据并转换为 base64 + const dataURL = canvas.toDataURL('image/png'); // 可以根据需要修改图像格式 + console.log(dataURL); + return dataURL; + } set_url(url){ this.url = url; this.dom_element.src = url; diff --git a/bricks/input.js b/bricks/input.js index 9a585d2..60d141e 100755 --- a/bricks/input.js +++ b/bricks/input.js @@ -125,6 +125,7 @@ bricks.UiStr =class extends bricks.UiType { var el = this._create('input'); this.dom_element = el; this.pattern = '.*'; + el.autocomplete = 'off'; el.type = 'text'; el.id = this.name = el.name = this.opts.name; if (this.opts.required) @@ -336,7 +337,54 @@ bricks.UiFile =class extends bricks.UiStr { return; this.value = v; } +} +bricks.UiImage =class extends bricks.VBox { + static uitype='image'; + constructor(opts){ + opts.name = opts.name || 'image'; + super(options); + this.bind('drop', this.dropHandle.bind(this)); + this.input = document.createElement('input'); + this.input.type = 'file'; + this.input.accept = 'image/*'; + this.input.addEventListener('change', this.handleFileSelect.bind(this)); + // this.bind('click', this.handleClick.bind(this)); + this.add_widget(new bricks.Text({text:'drop in or click to choose file'})); + this.dom_element.appendChild(this.input); + this.imgw = null; + } + handleFileSelect(event){ + const file = event.target.files[0]; + this.show_image(file); + } + dropHandle(event){ + e.preventDefault(); + const file = e.dataTransfer.files[0]; + this.show_image(file); + + } + show_image(file) { + const reader = new FileReader(); + reader.onload = (e) => { + this.clear_widgets(); + this.imgw = new bricks.Image({ + url:e.target.result, + width:'100%' + }); + this.add_widget(this.imgw); + }; + reader.readAsDataURL(file); + } + getValue(){ + ret = {} + if (! this.imgw){ + ret[this.name] = this.imgw.base64() + } else { + ret[this.name] = null; + } + return ret; + } } bricks.UiCheck =class extends bricks.UiType { @@ -645,7 +693,7 @@ bricks.UiCode =class extends bricks.UiType { if(event){ bricks.extend(params, event.params); } - await loadData(params); + await this.loadData(params); } async loadData(params){ var jcall = bricks.jcall; @@ -814,6 +862,7 @@ Input.register('UiCheck', bricks.UiCheck); Input.register('UiCheckBox', bricks.UiCheckBox); Input.register('UiEmail', bricks.UiEmail); Input.register('UiFile', bricks.UiFile); +Input.register('UiImage', bricks.UiImage); Input.register('UiCode', bricks.UiCode); Input.register('UiText', bricks.UiText); Input.register('UiPassword', bricks.UiPassword); diff --git a/bricks/jsoncall.js b/bricks/jsoncall.js index f7616f7..8f3b540 100755 --- a/bricks/jsoncall.js +++ b/bricks/jsoncall.js @@ -213,6 +213,7 @@ bricks.HttpResponseStream = class extends bricks.HttpResponse { buff_ += text; const lines = buff_.split('\n'); for (var i=0;i bricks.Body.dom_element.clientWidth){ + x = bricks.Body.dom_element.clientWidth - this.dom_element.offsetWidth; + } + if (y + this.dom_element.offsetHeight > bricks.Body.dom_element.clientHeight){ + y = bricks.Body.dom_element.clientHeight - this.dom_element.offsetHeight; + } this.set_style('left', x + 'px'); this.set_style('top', y + 'px'); + console.log('moveover event happen'); } hide(){ + console.log('moveout event happen'); this.set_style('display', 'none'); } } diff --git a/examples/form.ui b/examples/form.ui index 831420a..8316d45 100644 --- a/examples/form.ui +++ b/examples/form.ui @@ -134,6 +134,14 @@ "dataurl":"test_code.json", "required":true }, + { + "uitype":"image", + "name":"Image", + "height":"100px", + "width":"100px", + "label":"Image", + "required":true + }, { "uitype":"text", "name":"text",