From 45d425d5db96d827cfb0c60e434a79058e2b694e Mon Sep 17 00:00:00 2001 From: lxsang Date: Thu, 24 Sep 2020 18:22:16 +0200 Subject: [PATCH] add resizer to grid view --- Makefile | 2 +- src/core/tags/FileViewTag.ts | 4 +- src/core/tags/GridViewTag.ts | 36 +++++++++++-- src/core/tags/ResizerTag.ts | 98 +++++++++++++++++++++++++----------- 4 files changed, 103 insertions(+), 37 deletions(-) diff --git a/Makefile b/Makefile index 62ba55c..69ba425 100644 --- a/Makefile +++ b/Makefile @@ -194,7 +194,7 @@ release: main uglify doc: ./node_modules/.bin/typedoc --mode file --excludeNotExported --hideGenerator --name "AntOS API" --out $(DOCDIR) -test: +test: build_javascripts jest clean: diff --git a/src/core/tags/FileViewTag.ts b/src/core/tags/FileViewTag.ts index e0eac7a..5d52248 100644 --- a/src/core/tags/FileViewTag.ts +++ b/src/core/tags/FileViewTag.ts @@ -94,8 +94,8 @@ namespace OS { this._onfileopen = this._onfileselect = (e) => {}; this._header = [ { text: "__(File name)" }, - { text: "__(Type)", width: 150 }, - { text: "__(Size)", width: 70 }, + { text: "__(Type)" }, + { text: "__(Size)" }, ]; } diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts index 1336fe0..4252590 100644 --- a/src/core/tags/GridViewTag.ts +++ b/src/core/tags/GridViewTag.ts @@ -530,14 +530,32 @@ namespace OS { return; } $(this.refs.header).empty(); + let i = 0; for (let item of v) { - const el = $(`<${this.headeritem}>`).appendTo( + const element = $(`<${this.headeritem}>`).appendTo( this.refs.header - ); - const element = el[0] as GridCellPrototype; + )[0] as GridCellPrototype; element.uify(this.observable); element.data = item; item.domel = element; + i++; + if (i != v.length) { + const rz = $(``).appendTo( + this.refs.header + )[0] as ResizerTag; + $(rz).css("width", "3px"); + let next_item = undefined; + if (i < v.length) { + next_item = v[i]; + } + rz.onelresize = (e) => { + item.width = e.data.w + 3; + if (next_item) { + delete next_item.width; + } + }; + rz.uify(this.observable); + } } this.calibrate(); } @@ -843,11 +861,21 @@ namespace OS { }); } let template = ""; + let template_header = ""; + let i = 0; for (let v of colssize) { template += `${v}px `; + i++; + template_header += `${v}px `; + if (i < colssize.length) { + template_header += "3px "; + } } $(this.refs.grid).css("grid-template-columns", template); - $(this.refs.header).css("grid-template-columns", template); + $(this.refs.header).css( + "grid-template-columns", + template_header + ); } /** diff --git a/src/core/tags/ResizerTag.ts b/src/core/tags/ResizerTag.ts index a21092b..dd4163d 100644 --- a/src/core/tags/ResizerTag.ts +++ b/src/core/tags/ResizerTag.ts @@ -30,6 +30,15 @@ namespace OS { */ private _resizable_el: any; + /** + * Reference to the resize event callback + * + * @private + * @type {TagEventCallback} + * @memberof ResizerTag + */ + private _onresize: TagEventCallback; + /** * Reference to the parent tag of the current tag. * The parent tag should be an instance of a [[TileLayoutTag]] @@ -66,7 +75,6 @@ namespace OS { * @memberof ResizerTag */ protected init(): void { - this.dir = "hz"; this._resizable_el = undefined; this._parent = $(this).parent().parent()[0]; this._minsize = 0; @@ -82,24 +90,64 @@ namespace OS { protected reload(d?: any): void {} /** * Setter: - * + * * Set resize direction, two possible values: * - `hz` - horizontal direction, resize by width * - `ve` - vertical direction, resize by height - * + * * Getter: - * + * * Get the resize direction * * @memberof ResizerTag */ set dir(v: string) { + let att: string; $(this).attr("dir", v); + $(this).unbind("mousedown", null); + if (v === "hz") { + $(this).css("cursor", "col-resize"); + $(this).addClass("horizontal"); + if (this._resizable_el) { + att = $(this._resizable_el).attr("min-width"); + if (att) { + this._minsize = parseInt(att); + } + } + } else if (v === "ve") { + $(this).css("cursor", "row-resize"); + $(this).addClass("vertical"); + if (this._resizable_el) { + att = $(this._resizable_el).attr("min-height"); + if (att) { + this._minsize = parseInt(att); + } + } + } + if (this._minsize === 0) { + this._minsize = 10; + } + this.make_draggable(); } get dir(): string { return $(this).attr("dir"); } + /** + * Setter: + * - set the resize event callback + * + * Getter: + * - get the resize event callback + * @memberof GridViewTag + */ + set onelresize(v: TagEventCallback) { + this._onresize = v; + } + get onelresize(): TagEventCallback { + return this._onresize; + } + /** * Mount the tag to the DOM tree * @@ -107,7 +155,6 @@ namespace OS { * @memberof ResizerTag */ protected mount(): void { - let att: string; $(this).css(" display", "block"); const tagname = $(this._parent).prop("tagName"); this._resizable_el = @@ -116,31 +163,11 @@ namespace OS { : undefined; if (tagname === "AFX-HBOX") { this.dir = "hz"; - $(this).css("cursor", "col-resize"); - $(this).addClass("horizontal"); - if (this._resizable_el) { - att = $(this._resizable_el).attr("min-width"); - if (att) { - this._minsize = parseInt(att); - } - } } else if (tagname === "AFX-VBOX") { this.dir = "ve"; - $(this).css("cursor", "row-resize"); - $(this).addClass("vertical"); - if (this._resizable_el) { - att = $(this._resizable_el).attr("min-height"); - if (att) { - this._minsize = parseInt(att); - } - } } else { - this.dir = "none"; + this.dir = "hz"; } - if (this._minsize === 0) { - this._minsize = 10; - } - this.make_draggable(); } /** @@ -151,6 +178,9 @@ namespace OS { */ private make_draggable(): void { $(this).css("user-select", "none"); + if (!this.dir || this.dir == "none") { + return; + } $(this).on("mousedown", (e) => { e.preventDefault(); $(window).on("mousemove", (evt) => { @@ -191,10 +221,14 @@ namespace OS { w = this._minsize; } $(this._resizable_el).attr("data-width", w.toString()); - this.observable.trigger("resize", { + let evt = { id: this.aid, data: { w }, - }); + }; + if (this.onelresize) { + this.onelresize(evt); + } + this.observable.trigger("resize", evt); } /** @@ -215,10 +249,14 @@ namespace OS { h = this._minsize; } $(this._resizable_el).attr("data-height", h.toString()); - return this.observable.trigger("resize", { + let evt = { id: this.aid, data: { h }, - }); + }; + if (this.onelresize) { + this.onelresize(evt); + } + return this.observable.trigger("resize", evt); } /**