diff --git a/app/modifiers/ui_select.js b/app/modifiers/ui_select.js index dd5e580157f0e974afa44718a2436ae95478a1ff..ecce28bd249479f3a02bdca2729d8104bbbf2b8b 100644 --- a/app/modifiers/ui_select.js +++ b/app/modifiers/ui_select.js @@ -42,13 +42,42 @@ class UISelect { } update(x, y) { - console.log(`Updating ui selection ${x} ${y}`); + let height, width, top, left; + + this.current_x = x; + this.current_y = y; + + width = Math.abs(this.current_x - this.start_x); + height = Math.abs(this.current_y - this.start_y); + + if (this.select_div) { + + if (this.current_y < this.start_y) { + this.select_div.top = `${this.current_y + 7}px`; + top = this.current_y + 7; + } else { + this.select_div.top = `${this.start_y}px`; + top = this.start_y; + } + if (this.current_x < this.start_x) { + this.select_div.left = `${this.current_x + 7}px`; + left = this.current_x + 7; + } else { + this.select_div.left = `${this.start_x}px`; + left = this.start_x; + } + this.select_div.width = `${width}px`; + this.select_div.height = `${height}px`; + console.log(`select_div.width = ${width}`); + console.log(`select_div.height = ${height}`); + } } _create_selection_div(x, y) { let div = document.createElement('div'); + div.setAttribute('id', 'ui-select'); div.style.position = 'absolute'; div.style.top = `${y}px`; div.style.left = `${x}px`; diff --git a/app/styles/app.scss b/app/styles/app.scss index f09accdd2d4630b2f2073b84a5169bbb7ff22100..1f5db0cc7408fdbd07eb893e7c1365c1309f1049 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -8,6 +8,7 @@ @import "./document_version.scss"; @import "./search.scss"; @import "./preferences.scss"; +@import "./ui_select.scss"; body { diff --git a/app/styles/ui_select.scss b/app/styles/ui_select.scss new file mode 100644 index 0000000000000000000000000000000000000000..3f95a139b53df49592d78e2c27acde4e1cf6212e --- /dev/null +++ b/app/styles/ui_select.scss @@ -0,0 +1,4 @@ +#ui-select { + background-color: #e6f5ff40; + border: 1px solid #e6f5ff; +} \ No newline at end of file