From 0372864eaaa51815f41872972dda75f5be8cf0ed Mon Sep 17 00:00:00 2001 From: Sergey Linev Date: Mon, 30 Sep 2024 17:40:26 +0200 Subject: [PATCH] Build with fill pattern menu --- build/jsroot.js | 55 +++++++++++++++++++++++++++++--------------- modules/gui/menu.mjs | 13 +++++------ 2 files changed, 43 insertions(+), 25 deletions(-) diff --git a/build/jsroot.js b/build/jsroot.js index 93c7d6354..aaa48a7b0 100644 --- a/build/jsroot.js +++ b/build/jsroot.js @@ -60874,7 +60874,7 @@ class JSRootMenu { let col = (n < 0) ? 'none' : getColor(n); if ((n === 0) && (fill_kind === 1)) col = 'none'; - const lbl = (n <= 0) || (col[0] !== '#') ? col : `col ${n}`, + const lbl = (n <= 0) || ((col[0] !== '#') && (col.indexOf('rgb') < 0)) ? col : `col ${n}`, fill = (n === 1) ? 'white' : 'black', stroke = (n === 1) ? 'red' : 'black', rect = (value === (useid ? n : col)) ? `` : '', @@ -61120,22 +61120,34 @@ class JSRootMenu { /** @summary Add fill style menu * @private */ - addFillStyleMenu(name, value, color_index, painter, set_func) { + addFillStyleMenu(name, value, color_index, set_func) { this.sub('' + name, () => { - this.input('Enter fill style id (1001-solid, 3000..3010)', value, 'int', 0, 4000).then(id => { + this.input('Enter fill style id (1001-solid, 3100..4000)', value, 'int', 0, 4000).then(id => { if ((id >= 0) && (id <= 4000)) set_func(id); }); }); - const supported = [1, 1001, 3001, 3002, 3003, 3004, 3005, 3006, 3007, 3010, 3021, 3022]; + const supported = [1, 1001]; + for (let k = 3001; k < 3025; ++k) + supported.push(k); + supported.push(3144, 3244, 3344, 3305, 3315, 3325, 3490, 3481, 3472); for (let n = 0; n < supported.length; ++n) { - let svg = supported[n]; - if (painter) { - const sample = painter.createAttFill({ std: false, pattern: supported[n], color: color_index || 1 }); - svg = `${supported[n].toString()}`; - } - this.addchk(value === supported[n], svg, supported[n], arg => set_func(parseInt(arg))); + if (n % 7 === 0) this.add('column:'); + + const selected = (value === supported[n]); + + if (typeof document !== 'undefined') { + const svgelement = select(document.createElement('svg')), + handler = new TAttFillHandler({ color: color_index || 1, pattern: supported[n], svg: svgelement }); + svgelement.attr('width', 60).attr('height', 24); + if (selected) + svgelement.append('rect').attr('x', 0).attr('y', 0).attr('width', 60).attr('height', 24).style('stroke', 'red').style('fill', 'none').style('stroke-width', '3px'); + svgelement.append('rect').attr('x', 3).attr('y', 3).attr('width', 54).attr('height', 18).style('stroke', 'none').call(handler.func); + this.add(svgelement.node().outerHTML, supported[n], arg => set_func(parseInt(arg)), `Pattern : ${supported[n]}` + (selected ? ' Active' : '')); + } else + this.addchk(selected, supported[n].toString(), supported[n], arg => set_func(parseInt(arg))); + if (n % 7 === 6) this.add('endcolumn:'); } this.endsub(); } @@ -61258,7 +61270,7 @@ class JSRootMenu { if (pp) changeObjectMember(pp, 'fFrameFillColor', arg, true); painter.interactiveRedraw(redraw_arg, getColorExec(arg, 'SetFillColor')); }, painter.fillatt.kind); - this.addFillStyleMenu('style', painter.fillatt.pattern, painter.fillatt.colorindx, painter, id => { + this.addFillStyleMenu('style', painter.fillatt.pattern, painter.fillatt.colorindx, id => { painter.fillatt.change(undefined, id, painter.getCanvSvg()); changeObjectMember(painter, 'fFillStyle', id); if (pp) changeObjectMember(pp, 'fFrameFillStyle', id); @@ -61566,7 +61578,7 @@ class JSRootMenu { this.sub('Frame'); this.addColorMenu('Fill color', gStyle.fFrameFillColor, col => { gStyle.fFrameFillColor = col; }); - this.addFillStyleMenu('Fill style', gStyle.fFrameFillStyle, gStyle.fFrameFillColor, null, id => { gStyle.fFrameFillStyle = id; }); + this.addFillStyleMenu('Fill style', gStyle.fFrameFillStyle, gStyle.fFrameFillColor, id => { gStyle.fFrameFillStyle = id; }); this.addColorMenu('Line color', gStyle.fFrameLineColor, col => { gStyle.fFrameLineColor = col; }); this.addSizeMenu('Line width', 1, 10, 1, gStyle.fFrameLineWidth, w => { gStyle.fFrameLineWidth = w; }); this.addLineStyleMenu('Line style', gStyle.fFrameLineStyle, st => { gStyle.fFrameLineStyle = st; }); @@ -61582,7 +61594,7 @@ class JSRootMenu { this.sub('Title'); this.addColorMenu('Fill color', gStyle.fTitleColor, col => { gStyle.fTitleColor = col; }); - this.addFillStyleMenu('Fill style', gStyle.fTitleStyle, gStyle.fTitleColor, null, id => { gStyle.fTitleStyle = id; }); + this.addFillStyleMenu('Fill style', gStyle.fTitleStyle, gStyle.fTitleColor, id => { gStyle.fTitleStyle = id; }); this.addColorMenu('Text color', gStyle.fTitleTextColor, col => { gStyle.fTitleTextColor = col; }); this.addSizeMenu('Border size', 0, 10, 1, gStyle.fTitleBorderSize, sz => { gStyle.fTitleBorderSize = sz; }); this.addSizeMenu('Font size', 0.01, 0.1, 0.01, gStyle.fTitleFontSize, sz => { gStyle.fTitleFontSize = sz; }); @@ -61595,7 +61607,7 @@ class JSRootMenu { this.sub('Stat box'); this.addColorMenu('Fill color', gStyle.fStatColor, col => { gStyle.fStatColor = col; }); - this.addFillStyleMenu('Fill style', gStyle.fStatStyle, gStyle.fStatColor, null, id => { gStyle.fStatStyle = id; }); + this.addFillStyleMenu('Fill style', gStyle.fStatStyle, gStyle.fStatColor, id => { gStyle.fStatStyle = id; }); this.addColorMenu('Text color', gStyle.fStatTextColor, col => { gStyle.fStatTextColor = col; }); this.addSizeMenu('Border size', 0, 10, 1, gStyle.fStatBorderSize, sz => { gStyle.fStatBorderSize = sz; }); this.addSizeMenu('Font size', 0, 30, 5, gStyle.fStatFontSize, sz => { gStyle.fStatFontSize = sz; }); @@ -61609,7 +61621,7 @@ class JSRootMenu { this.sub('Legend'); this.addColorMenu('Fill color', gStyle.fLegendFillColor, col => { gStyle.fLegendFillColor = col; }); - this.addFillStyleMenu('Fill style', gStyle.fLegendFillStyle, gStyle.fLegendFillColor, null, id => { gStyle.fLegendFillStyle = id; }); + this.addFillStyleMenu('Fill style', gStyle.fLegendFillStyle, gStyle.fLegendFillColor, id => { gStyle.fLegendFillStyle = id; }); this.addSizeMenu('Border size', 0, 10, 1, gStyle.fLegendBorderSize, sz => { gStyle.fLegendBorderSize = sz; }); this.addFontMenu('Font', gStyle.fLegendFont, fnt => { gStyle.fLegendFont = fnt; }); this.addSizeMenu('Text size', 0, 0.1, 0.01, gStyle.fLegendTextSize, v => { gStyle.fLegendTextSize = v; }, 'legend text size, when 0 - auto adjustment is used'); @@ -61625,7 +61637,7 @@ class JSRootMenu { this.addSizeMenu('End error', 0, 12, 1, gStyle.fEndErrorSize, v => { gStyle.fEndErrorSize = v; }, 'size in pixels of end error for E1 draw options, gStyle.fEndErrorSize'); this.addSizeMenu('Top margin', 0.0, 0.5, 0.05, gStyle.fHistTopMargin, v => { gStyle.fHistTopMargin = v; }, 'Margin between histogram top and frame top'); this.addColorMenu('Fill color', gStyle.fHistFillColor, col => { gStyle.fHistFillColor = col; }); - this.addFillStyleMenu('Fill style', gStyle.fHistFillStyle, gStyle.fHistFillColor, null, id => { gStyle.fHistFillStyle = id; }); + this.addFillStyleMenu('Fill style', gStyle.fHistFillStyle, gStyle.fHistFillColor, id => { gStyle.fHistFillStyle = id; }); this.addColorMenu('Line color', gStyle.fHistLineColor, col => { gStyle.fHistLineColor = col; }); this.addSizeMenu('Line width', 1, 10, 1, gStyle.fHistLineWidth, w => { gStyle.fHistLineWidth = w; }); this.addLineStyleMenu('Line style', gStyle.fHistLineStyle, st => { gStyle.fHistLineStyle = st; }); @@ -147021,9 +147033,16 @@ async function drawText$1() { fact = 0.8; } - return this.startTextDrawingAsync(this.textatt.font, this.textatt.getSize(w, h, fact, 0.05)) + let draw_g = this.draw_g; + if (text.fName.startsWith('http://') || text.fName.startsWith('https://')) { + const a = draw_g.append('a').attr('href', text.fName).attr('title', `Link on ${text.fName}`); + draw_g = a; + arg.draw_g = a; + } + + return this.startTextDrawingAsync(this.textatt.font, this.textatt.getSize(w, h, fact, 0.05), draw_g) .then(() => this.drawText(arg)) - .then(() => this.finishTextDrawing()) + .then(() => this.finishTextDrawing(draw_g)) .then(() => { if (this.isBatchMode()) return this; diff --git a/modules/gui/menu.mjs b/modules/gui/menu.mjs index 03da1edff..cbb6d73b6 100644 --- a/modules/gui/menu.mjs +++ b/modules/gui/menu.mjs @@ -480,22 +480,21 @@ class JSRootMenu { supported.push(3144, 3244, 3344, 3305, 3315, 3325, 3490, 3481, 3472); for (let n = 0; n < supported.length; ++n) { - if (n % 7 === 0) this.add('column:'); + if (n % 7 === 0) this.add('column:'); const selected = (value === supported[n]); if (typeof document !== 'undefined') { - const svgelement = d3_select(document.createElement('svg')); - const handler = new TAttFillHandler({ color: color_index || 1, pattern: supported[n], svg: svgelement }); + const svgelement = d3_select(document.createElement('svg')), + handler = new TAttFillHandler({ color: color_index || 1, pattern: supported[n], svg: svgelement }); svgelement.attr('width', 60).attr('height', 24); if (selected) - svgelement.append('rect').attr('x', 0).attr('y', 0).attr('width', 60).attr('height', 24).style('stroke', 'red').style('fill', 'none').style('stroke-width','3px'); + svgelement.append('rect').attr('x', 0).attr('y', 0).attr('width', 60).attr('height', 24).style('stroke', 'red').style('fill', 'none').style('stroke-width', '3px'); svgelement.append('rect').attr('x', 3).attr('y', 3).attr('width', 54).attr('height', 18).style('stroke', 'none').call(handler.func); this.add(svgelement.node().outerHTML, supported[n], arg => set_func(parseInt(arg)), `Pattern : ${supported[n]}` + (selected ? ' Active' : '')); - } else { + } else this.addchk(selected, supported[n].toString(), supported[n], arg => set_func(parseInt(arg))); - } - if (n % 7 === 6) this.add('endcolumn:'); + if (n % 7 === 6) this.add('endcolumn:'); } this.endsub(); }