From 7412e8fb22fd1899d6fd93895863a718b5700304 Mon Sep 17 00:00:00 2001 From: Sergey Linev Date: Wed, 4 Dec 2024 14:05:04 +0100 Subject: [PATCH] build with canvas border --- build/jsroot.js | 91 ++++++++++++++++++++++++++++--------------------- 1 file changed, 52 insertions(+), 39 deletions(-) diff --git a/build/jsroot.js b/build/jsroot.js index 10bbc71fe..aa138e285 100644 --- a/build/jsroot.js +++ b/build/jsroot.js @@ -9308,8 +9308,7 @@ function convertDate(dt) { /** @summary Box decorations * @private */ -function getBoxDecorations(xx, yy, ww, hh, bmode, pww, phh) -{ +function getBoxDecorations(xx, yy, ww, hh, bmode, pww, phh) { const side1 = `M${xx},${yy}h${ww}l${-pww},${phh}h${2*pww-ww}v${hh-2*phh}l${-pww},${phh}z`, side2 = `M${xx+ww},${yy+hh}v${-hh}l${-pww},${phh}v${hh-2*phh}h${2*pww-ww}l${-pww},${phh}z`; return bmode > 0 ? [side1, side2] : [side2, side1]; @@ -69531,11 +69530,7 @@ class TPadPainter extends ObjectPainter { this._pad_width = rect.width; this._pad_height = rect.height; - if (frect) { - frect.attr('d', `M0,0H${rect.width}V${rect.height}H0Z`) - .call(this.fillatt.func); - this.drawActiveBorder(frect); - } + this.addPadBorder(svg, frect); this.setFastDrawing(rect.width * (1 - this.pad.fLeftMargin - this.pad.fRightMargin), rect.height * (1 - this.pad.fBottomMargin - this.pad.fTopMargin)); @@ -69712,38 +69707,9 @@ class TPadPainter extends ObjectPainter { this._pad_width = w; this._pad_height = h; - if (svg_border) { - svg_border.attr('d', `M0,0H${w}V${h}H0Z`) - .call(this.fillatt.func) - .call(this.lineatt.func); - this.drawActiveBorder(svg_border); - - let svg_border1 = svg_pad.selectChild('.root_pad_border1'), - svg_border2 = svg_pad.selectChild('.root_pad_border2'); - - if (this.pad.fBorderMode && this.pad.fBorderSize) { - const pw = this.pad.fBorderSize, ph = this.pad.fBorderSize, - side1 = `M0,0h${w}l${-pw},${ph}h${2*pw-w}v${h-2*ph}l${-pw},${ph}z`, - side2 = `M${w},${h}v${-h}l${-pw},${ph}v${h-2*ph}h${2*pw-w}l${-pw},${ph}z`; - - if (svg_border2.empty()) - svg_border2 = svg_pad.insert('svg:path', '.primitives_layer').attr('class', 'root_pad_border2'); - if (svg_border1.empty()) - svg_border1 = svg_pad.insert('svg:path', '.primitives_layer').attr('class', 'root_pad_border1'); - - svg_border1.attr('d', this.pad.fBorderMode > 0 ? side1 : side2) - .call(this.fillatt.func) - .style('fill', rgb(this.fillatt.color).brighter(0.5).formatRgb()); - svg_border2.attr('d', this.pad.fBorderMode > 0 ? side2 : side1) - .call(this.fillatt.func) - .style('fill', rgb(this.fillatt.color).darker(0.5).formatRgb()); - } else { - svg_border1.remove(); - svg_border2.remove(); - } - } + this.addPadBorder(svg_pad, svg_border, true); - this.setFastDrawing(w * (1 - this.pad.fLeftMargin-this.pad.fRightMargin), h * (1 - this.pad.fBottomMargin - this.pad.fTopMargin)); + this.setFastDrawing(w * (1 - this.pad.fLeftMargin - this.pad.fRightMargin), h * (1 - this.pad.fBottomMargin - this.pad.fTopMargin)); // special case of 3D canvas overlay if (svg_pad.property('can3d') === constants$1.Embed3D.Overlay) { @@ -69757,6 +69723,42 @@ class TPadPainter extends ObjectPainter { return pad_visible; } + /** @summary Add border decorations + * @private */ + addPadBorder(svg_pad, svg_border, draw_line) { + if (!svg_border) + return; + + svg_border.attr('d', `M0,0H${this._pad_width}V${this._pad_height}H0Z`) + .call(this.fillatt.func); + if (draw_line) + svg_border.call(this.lineatt.func); + + this.drawActiveBorder(svg_border); + + let svg_border1 = svg_pad.selectChild('.root_pad_border1'), + svg_border2 = svg_pad.selectChild('.root_pad_border2'); + + if (this.pad.fBorderMode && this.pad.fBorderSize) { + const arr = getBoxDecorations(0, 0, this._pad_width, this._pad_height, this.pad.fBorderMode, this.pad.fBorderSize, this.pad.fBorderSize); + + if (svg_border2.empty()) + svg_border2 = svg_pad.insert('svg:path', '.primitives_layer').attr('class', 'root_pad_border2'); + if (svg_border1.empty()) + svg_border1 = svg_pad.insert('svg:path', '.primitives_layer').attr('class', 'root_pad_border1'); + + svg_border1.attr('d', arr[0]) + .call(this.fillatt.func) + .style('fill', rgb(this.fillatt.color).brighter(0.5).formatRgb()); + svg_border2.attr('d', arr[1]) + .call(this.fillatt.func) + .style('fill', rgb(this.fillatt.color).darker(0.5).formatRgb()); + } else { + svg_border1.remove(); + svg_border2.remove(); + } + } + /** @summary Add pad interactive features like dragging and resize * @private */ addPadInteractive(cleanup = false) { @@ -70115,6 +70117,17 @@ class TPadPainter extends ObjectPainter { if (isFunc(this.drawObject)) menu.add('Build legend', () => this.buildLegend()); + menu.sub('Border'); + menu.addSelectMenu('Mode', ['Down', 'Off', 'Up'], this.pad.fBorderMode + 1, v => { + this.pad.fBorderMode = v - 1; + this.interactiveRedraw(true, `exec:SetBorderMode(${v-1})`); + }, 'Pad border mode'); + menu.addSizeMenu('Size', 0, 20, 2, this.pad.fBorderSize, v => { + this.pad.fBorderSize = v; + this.interactiveRedraw(true, `exec:SetBorderSize(${v})`); + }, 'Pad border size'); + menu.endsub(); + menu.sub('Divide', () => menu.input('Input divide arg', '2x2').then(do_divide), 'Divide on sub-pads'); ['1x2', '2x1', '2x2', '2x3', '3x2', '3x3', '4x4', '0'].forEach(item => menu.add(item, item, do_divide)); menu.endsub(); @@ -78608,7 +78621,7 @@ let TH2Painter$2 = class TH2Painter extends THistPainter { cross += `M${xx},${yy}l${ww},${hh}m0,${-hh}l${-ww},${hh}`; if ((this.options.BoxStyle === 11) && (ww > 5) && (hh > 5)) { - const arr = getBoxDecorations(xx, yy, ww, hh, binz, Math.round(ww*0.1), Math.round(hh*0.1)); + const arr = getBoxDecorations(xx, yy, ww, hh, binz < 0 ? -1 : 1, Math.round(ww*0.1), Math.round(hh*0.1)); btn1 += arr[0]; btn2 += arr[1]; }