Skip to content

Commit 340899a

Browse files
linevlinev
committed
Reduce this.draw_g usage in frame painters
1 parent 3af1653 commit 340899a

File tree

3 files changed

+88
-87
lines changed

3 files changed

+88
-87
lines changed

‎modules/base/ObjectPainter.mjs

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,10 @@ class ObjectPainter extends BasePainter {
333333
* @protected */
334334
getG() { return this.draw_g; }
335335

336+
/** @summary Assign G element used for object drawing
337+
* @protected */
338+
setG(g) { this.draw_g = g; return g; }
339+
336340
/** @summary (re)creates svg:g element for object drawings
337341
* @desc either one attach svg:g to pad primitives (default)
338342
* or svg:g element created in specified frame layer ('main_layer' will be used when true specified)
@@ -501,7 +505,7 @@ class ObjectPainter extends BasePainter {
501505
* @protected */
502506
getAxisToSvgFunc(isndc, nornd, use_frame_coordinates) {
503507
const func = { isndc, nornd },
504-
use_frame = this.draw_g?.property('in_frame');
508+
use_frame = this.getG()?.property('in_frame');
505509
if (use_frame || (use_frame_coordinates && !isndc))
506510
func.fp = this.getFramePainter();
507511
if (func.fp?.grx && func.fp?.gry) {
@@ -566,7 +570,7 @@ class ObjectPainter extends BasePainter {
566570
* @return {number} value of requested coordinates
567571
* @protected */
568572
svgToAxis(axis, coord, ndc) {
569-
const use_frame = this.draw_g?.property('in_frame');
573+
const use_frame = this.getG()?.property('in_frame');
570574

571575
if (use_frame)
572576
return this.getFramePainter()?.revertAxis(axis, coord) ?? 0;
@@ -965,7 +969,8 @@ class ObjectPainter extends BasePainter {
965969
* @param {number} [max_font_size] - maximal font size, used when text can be scaled
966970
* @protected */
967971
startTextDrawing(font_face, font_size, draw_g, max_font_size, can_async) {
968-
if (!draw_g) draw_g = this.draw_g;
972+
if (!draw_g)
973+
draw_g = this.getG();
969974
if (!draw_g || draw_g.empty())
970975
return false;
971976

@@ -1012,8 +1017,10 @@ class ObjectPainter extends BasePainter {
10121017
* @param {object} [draw_g] - drawing element for the text
10131018
* @protected */
10141019
scaleTextDrawing(factor, draw_g) {
1015-
if (!draw_g) draw_g = this.draw_g;
1016-
if (!draw_g || draw_g.empty()) return;
1020+
if (!draw_g)
1021+
draw_g = this.getG();
1022+
if (!draw_g || draw_g.empty())
1023+
return;
10171024
if (factor && (factor > draw_g.property('text_factor')))
10181025
draw_g.property('text_factor', factor);
10191026
}
@@ -1238,7 +1245,7 @@ class ObjectPainter extends BasePainter {
12381245
if (!arg.text)
12391246
arg.text = '';
12401247

1241-
arg.draw_g = arg.draw_g || this.draw_g;
1248+
arg.draw_g = arg.draw_g || this.getG();
12421249
if (!arg.draw_g || arg.draw_g.empty())
12431250
return;
12441251

@@ -1362,12 +1369,12 @@ class ObjectPainter extends BasePainter {
13621369

13631370
/** @summary Finish text drawing
13641371
* @desc Should be called to complete all text drawing operations
1365-
* @param {function} [draw_g] - <g> element for text drawing, this.draw_g used when not specified
1372+
* @param {function} [draw_g] - <g> element for text drawing, default is getG()
13661373
* @return {Promise} when text drawing completed
13671374
* @protected */
13681375
async finishTextDrawing(draw_g, try_optimize) {
13691376
if (!draw_g)
1370-
draw_g = this.draw_g;
1377+
draw_g = this.getG();
13711378
if (!draw_g || draw_g.empty())
13721379
return false;
13731380

‎modules/gpad/RFramePainter.mjs

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,7 @@ class RFramePainter extends RObjectPainter {
589589
cleanupAxes() {
590590
this.cleanXY();
591591

592-
this.draw_g?.selectChild('.axis_layer').selectAll('*').remove();
592+
this.getG()?.selectChild('.axis_layer').selectAll('*').remove();
593593
this.#axes_drawn = false;
594594
}
595595

@@ -614,23 +614,21 @@ class RFramePainter extends RObjectPainter {
614614
clean('x2');
615615
clean('y2');
616616

617-
this.draw_g?.selectChild('.main_layer').selectAll('*').remove();
618-
this.draw_g?.selectChild('.upper_layer').selectAll('*').remove();
617+
this.getG()?.selectChild('.main_layer').selectAll('*').remove();
618+
this.getG()?.selectChild('.upper_layer').selectAll('*').remove();
619619
}
620620

621621
/** @summary Fully cleanup frame
622622
* @private */
623623
cleanup() {
624624
this.cleanFrameDrawings();
625625

626-
if (this.draw_g) {
627-
this.draw_g.selectAll('*').remove();
628-
this.draw_g.on('mousedown', null)
629-
.on('dblclick', null)
630-
.on('wheel', null)
631-
.on('contextmenu', null)
632-
.property('interactive_set', null);
633-
}
626+
this.getG()?.selectAll('*').remove();
627+
this.getG()?.on('mousedown', null)
628+
.on('dblclick', null)
629+
.on('wheel', null)
630+
.on('contextmenu', null)
631+
.property('interactive_set', null);
634632

635633
if (this.#keys_handler) {
636634
window.removeEventListener('keydown', this.#keys_handler, false);
@@ -645,7 +643,7 @@ class RFramePainter extends RObjectPainter {
645643
delete this.x2axis;
646644
delete this.y2axis;
647645

648-
delete this.draw_g; // frame <g> element managed by the pad
646+
this.setG(undefined); // frame <g> element managed by the pad
649647

650648
this.#click_handler = undefined;
651649
this.#dblclick_handler = undefined;
@@ -686,34 +684,33 @@ class RFramePainter extends RObjectPainter {
686684
* @private */
687685
createFrameG() {
688686
// this is svg:g object - container for every other items belonging to frame
689-
this.draw_g = this.getFrameSvg();
690-
691-
let top_rect, main_svg;
687+
let g = this.setG(this.getFrameSvg()),
688+
top_rect, main_svg;
692689

693-
if (this.draw_g.empty()) {
694-
this.draw_g = this.getLayerSvg('primitives_layer').append('svg:g').attr('class', 'root_frame');
690+
if (g.empty()) {
691+
g = this.setG(this.getLayerSvg('primitives_layer').append('svg:g').attr('class', 'root_frame'));
695692

696693
if (!this.isBatchMode())
697-
this.draw_g.append('svg:title').text('');
694+
g.append('svg:title').text('');
698695

699-
top_rect = this.draw_g.append('svg:rect');
696+
top_rect = g.append('svg:rect');
700697

701-
main_svg = this.draw_g.append('svg:svg')
702-
.attr('class', 'main_layer')
703-
.attr('x', 0)
704-
.attr('y', 0)
705-
.attr('overflow', 'hidden');
698+
main_svg = g.append('svg:svg')
699+
.attr('class', 'main_layer')
700+
.attr('x', 0)
701+
.attr('y', 0)
702+
.attr('overflow', 'hidden');
706703

707-
this.draw_g.append('svg:g').attr('class', 'axis_layer');
708-
this.draw_g.append('svg:g').attr('class', 'upper_layer');
704+
g.append('svg:g').attr('class', 'axis_layer');
705+
g.append('svg:g').attr('class', 'upper_layer');
709706
} else {
710-
top_rect = this.draw_g.selectChild('rect');
711-
main_svg = this.draw_g.selectChild('.main_layer');
707+
top_rect = g.selectChild('rect');
708+
main_svg = g.selectChild('.main_layer');
712709
}
713710

714711
this.#axes_drawn = false;
715712

716-
this.draw_g.attr('transform', this.#frame_trans);
713+
g.attr('transform', this.#frame_trans);
717714

718715
top_rect.attr('x', 0)
719716
.attr('y', 0)
@@ -758,7 +755,7 @@ class RFramePainter extends RObjectPainter {
758755
y: this.#frame_y || 0,
759756
width: this.getFrameWidth(),
760757
height: this.getFrameHeight(),
761-
transform: this.draw_g?.attr('transform') || '',
758+
transform: this.getG()?.attr('transform') || '',
762759
hint_delta_x: 0,
763760
hint_delta_y: 0
764761
};

‎modules/gpad/TFramePainter.mjs

Lines changed: 46 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function addDragHandler(_painter, arg) {
117117
arg.cleanup = true;
118118

119119
if (!isFunc(arg.getDrawG))
120-
arg.getDrawG = () => painter?.draw_g;
120+
arg.getDrawG = () => painter?.getG();
121121

122122
function makeResizeElements(group, handler) {
123123
function addElement(cursor, d) {
@@ -388,7 +388,7 @@ class TooltipHandler extends ObjectPainter {
388388
processFrameTooltipEvent(pnt, evnt) {
389389
if (pnt?.handler) {
390390
// special use of interactive handler in the frame painter
391-
const rect = this.draw_g?.selectChild('.main_layer');
391+
const rect = this.getG()?.selectChild('.main_layer');
392392
if (!rect || rect.empty())
393393
pnt = null; // disable
394394
else if (pnt.touch && evnt) {
@@ -735,8 +735,8 @@ class FrameInteractive extends TooltipHandler {
735735
only_resize: true, minwidth: 20, minheight: 20, redraw: () => this.sizeChanged() });
736736
}
737737

738-
const top_rect = this.draw_g.selectChild('path'),
739-
main_svg = this.draw_g.selectChild('.main_layer');
738+
const top_rect = this.getG().selectChild('path'),
739+
main_svg = this.getG().selectChild('.main_layer');
740740

741741
top_rect.style('pointer-events', 'visibleFill') // let process mouse events inside frame
742742
.style('cursor', 'default'); // show normal cursor
@@ -937,7 +937,7 @@ class FrameInteractive extends TooltipHandler {
937937
if (evnt.buttons === this._shifting_buttons) {
938938
const frame = this.getFrameSvg(),
939939
pos = d3_pointer(evnt, frame.node()),
940-
main_svg = this.draw_g.selectChild('.main_layer'),
940+
main_svg = this.getG().selectChild('.main_layer'),
941941
dx = pos0[0] - pos[0],
942942
dy = (this.scales_ndim === 1) ? 0 : pos0[1] - pos[1],
943943
w = this.getFrameWidth(), h = this.getFrameHeight();
@@ -966,7 +966,7 @@ class FrameInteractive extends TooltipHandler {
966966
/** @summary Shift scales on defined positions */
967967
performScalesShift() {
968968
const w = this.getFrameWidth(), h = this.getFrameHeight(),
969-
main_svg = this.draw_g.selectChild('.main_layer'),
969+
main_svg = this.getG().selectChild('.main_layer'),
970970
gr = this.getGrFuncs(),
971971
xmin = gr.revertAxis('x', this._shifting_dx),
972972
xmax = gr.revertAxis('x', this._shifting_dx + w),
@@ -1561,7 +1561,7 @@ class FrameInteractive extends TooltipHandler {
15611561
* @private */
15621562
moveTouchHandling(evnt, kind, pos0) {
15631563
const frame = this.getFrameSvg(),
1564-
main_svg = this.draw_g.selectChild('.main_layer');
1564+
main_svg = this.getG().selectChild('.main_layer');
15651565
let pos;
15661566

15671567
try {
@@ -2451,7 +2451,7 @@ class TFramePainter extends FrameInteractive {
24512451
this.x2_handle?.removeG();
24522452
this.y2_handle?.removeG();
24532453

2454-
this.draw_g?.selectChild('.axis_layer').selectAll('*').remove();
2454+
this.getG()?.selectChild('.axis_layer').selectAll('*').remove();
24552455
this.#axes_drawn = this.#axes2_drawn = false;
24562456
}
24572457

@@ -2478,24 +2478,22 @@ class TFramePainter extends FrameInteractive {
24782478
this.scale_ymin = this.scale_ymax = 0;
24792479
this.scale_zmin = this.scale_zmax = 0;
24802480

2481-
this.draw_g?.selectChild('.main_layer').selectAll('*').remove();
2482-
this.draw_g?.selectChild('.upper_layer').selectAll('*').remove();
2481+
this.getG()?.selectChild('.main_layer').selectAll('*').remove();
2482+
this.getG()?.selectChild('.upper_layer').selectAll('*').remove();
24832483

24842484
this.xaxis = null;
24852485
this.yaxis = null;
24862486
this.zaxis = null;
24872487

2488-
if (this.draw_g) {
2489-
this.draw_g.selectAll('*').remove();
2490-
this.draw_g.on('mousedown', null)
2491-
.on('dblclick', null)
2492-
.on('wheel', null)
2493-
.on('contextmenu', null)
2494-
.property('interactive_set', null);
2495-
this.draw_g.remove();
2496-
}
2488+
this.getG()?.selectAll('*').remove();
2489+
this.getG()?.on('mousedown', null)
2490+
.on('dblclick', null)
2491+
.on('wheel', null)
2492+
.on('contextmenu', null)
2493+
.property('interactive_set', null)
2494+
.remove();
24972495

2498-
delete this.draw_g; // frame <g> element managed by the pad
2496+
this.setG(undefined); // frame <g> element managed by the pad
24992497

25002498
if (this.#keys_handler) {
25012499
window.removeEventListener('keydown', this.#keys_handler, false);
@@ -2544,35 +2542,34 @@ class TFramePainter extends FrameInteractive {
25442542
* @private */
25452543
createFrameG() {
25462544
// this is svg:g object - container for every other items belonging to frame
2547-
this.draw_g = this.getFrameSvg();
2548-
2549-
let top_rect, main_svg;
2545+
let g = this.setG(this.getFrameSvg()),
2546+
top_rect, main_svg;
25502547

2551-
if (this.draw_g.empty()) {
2552-
this.draw_g = this.getLayerSvg('primitives_layer').append('svg:g').attr('class', 'root_frame');
2548+
if (g.empty()) {
2549+
g = this.setG(this.getLayerSvg('primitives_layer').append('svg:g').attr('class', 'root_frame'));
25532550

25542551
// empty title on the frame required to suppress title of the canvas
25552552
if (!this.isBatchMode())
2556-
this.draw_g.append('svg:title').text('');
2553+
g.append('svg:title').text('');
25572554

2558-
top_rect = this.draw_g.append('svg:path');
2555+
top_rect = g.append('svg:path');
25592556

2560-
main_svg = this.draw_g.append('svg:svg')
2561-
.attr('class', 'main_layer')
2562-
.attr('x', 0)
2563-
.attr('y', 0)
2564-
.attr('overflow', 'hidden');
2557+
main_svg = g.append('svg:svg')
2558+
.attr('class', 'main_layer')
2559+
.attr('x', 0)
2560+
.attr('y', 0)
2561+
.attr('overflow', 'hidden');
25652562

2566-
this.draw_g.append('svg:g').attr('class', 'axis_layer');
2567-
this.draw_g.append('svg:g').attr('class', 'upper_layer');
2563+
g.append('svg:g').attr('class', 'axis_layer');
2564+
g.append('svg:g').attr('class', 'upper_layer');
25682565
} else {
2569-
top_rect = this.draw_g.selectChild('path');
2570-
main_svg = this.draw_g.selectChild('.main_layer');
2566+
top_rect = g.selectChild('path');
2567+
main_svg = g.selectChild('.main_layer');
25712568
}
25722569

25732570
this.#axes_drawn = this.#axes2_drawn = false;
25742571

2575-
this.draw_g.attr('transform', this.#frame_trans);
2572+
g.attr('transform', this.#frame_trans);
25762573

25772574
top_rect.attr('d', `M0,0H${this.#frame_width}V${this.#frame_height}H0Z`)
25782575
.call(this.fillatt.func)
@@ -2582,19 +2579,19 @@ class TFramePainter extends FrameInteractive {
25822579
.attr('height', this.#frame_height)
25832580
.attr('viewBox', `0 0 ${this.#frame_width} ${this.#frame_height}`);
25842581

2585-
this.draw_g.selectAll('.frame_deco').remove();
2582+
g.selectAll('.frame_deco').remove();
25862583
if (this.#border_mode && this.fillatt.hasColor()) {
25872584
const paths = getBoxDecorations(0, 0, this.#frame_width, this.#frame_height, this.#border_mode, this.#border_size || 2, this.#border_size || 2);
2588-
this.draw_g.insert('svg:path', '.main_layer')
2589-
.attr('class', 'frame_deco')
2590-
.attr('d', paths[0])
2591-
.call(this.fillatt.func)
2592-
.style('fill', d3_rgb(this.fillatt.color).brighter(0.5).formatRgb());
2593-
this.draw_g.insert('svg:path', '.main_layer')
2594-
.attr('class', 'frame_deco')
2595-
.attr('d', paths[1])
2596-
.call(this.fillatt.func)
2597-
.style('fill', d3_rgb(this.fillatt.color).darker(0.5).formatRgb());
2585+
g.insert('svg:path', '.main_layer')
2586+
.attr('class', 'frame_deco')
2587+
.attr('d', paths[0])
2588+
.call(this.fillatt.func)
2589+
.style('fill', d3_rgb(this.fillatt.color).brighter(0.5).formatRgb());
2590+
g.insert('svg:path', '.main_layer')
2591+
.attr('class', 'frame_deco')
2592+
.attr('d', paths[1])
2593+
.call(this.fillatt.func)
2594+
.style('fill', d3_rgb(this.fillatt.color).darker(0.5).formatRgb());
25982595
}
25992596

26002597
return this;
@@ -2841,7 +2838,7 @@ class TFramePainter extends FrameInteractive {
28412838
y: this.#frame_y || 0,
28422839
width: this.getFrameWidth(),
28432840
height: this.getFrameHeight(),
2844-
transform: this.draw_g?.attr('transform') || '',
2841+
transform: this.getG()?.attr('transform') || '',
28452842
hint_delta_x: 0,
28462843
hint_delta_y: 0
28472844
};

0 commit comments

Comments
 (0)