diff --git a/js/viz/core/plaque.js b/js/viz/core/plaque.js index d48785dc965b..4a6b2c5bf03d 100644 --- a/js/viz/core/plaque.js +++ b/js/viz/core/plaque.js @@ -322,7 +322,10 @@ export class Plaque { const renderer = this.widget._renderer; const options = this.options; - const cloudSettings = { opacity: options.opacity, 'stroke-width': 0, fill: options.color }; + const shadowSettings = extend({ x: '-50%', y: '-50%', width: '200%', height: '200%' }, options.shadow); + const shadow = this._shadow = renderer.shadowFilter().attr(shadowSettings); + + const cloudSettings = { opacity: options.opacity, filter: shadow.id, 'stroke-width': 0, fill: options.color }; const borderOptions = options.border || {}; if(borderOptions.visible) { @@ -334,14 +337,11 @@ export class Plaque { }); } - const shadowSettings = extend({ x: '-50%', y: '-50%', width: '200%', height: '200%' }, options.shadow); - const shadow = this._shadow = renderer.shadowFilter().attr(shadowSettings); - const group = this._root = renderer.g().append(this.root); if(options.type) { group.attr({ class: `dxc-${options.type}-annotation` }); } - const cloudGroup = renderer.g().attr({ filter: shadow.id }).append(group); + const cloudGroup = renderer.g().append(group); this._cloud = renderer.path([], 'area').attr(cloudSettings).sharp().append(cloudGroup); this._contentGroup = renderer.g().append(group); diff --git a/testing/tests/DevExpress.viz.core/annotations.tests.js b/testing/tests/DevExpress.viz.core/annotations.tests.js index 018c9cb79963..13d9cd1d608d 100644 --- a/testing/tests/DevExpress.viz.core/annotations.tests.js +++ b/testing/tests/DevExpress.viz.core/annotations.tests.js @@ -215,11 +215,10 @@ QUnit.test('Draw image inside a plaque with borders and arrow', function(assert) stroke: '#000000', dashStyle: 'solid', fill: '#AAAAAA', + filter: 'shadowFilter.id', opacity: 0.5 }]); const cloudGroup = this.renderer.g.getCall(2).returnValue; - assert.deepEqual(cloudGroup.attr.firstCall.args, [{ filter: 'shadowFilter.id' }]); - assert.deepEqual(plaque.append.firstCall.args, [cloudGroup]); assert.equal(plaque.sharp.callCount, 1); checkCloudPath(assert, plaque, [80, 140, 120, 140, 120, 145, 140, 160, 120, 175, 120, 180, 80, 180], [90, 100, 160]); @@ -272,6 +271,7 @@ QUnit.test('Draw image inside a plaque without borders', function(assert) { assert.deepEqual(plaque.attr.firstCall.args, [{ 'stroke-width': 0, fill: '#AAAAAA', + filter: 'shadowFilter.id', opacity: 0.5 }]); }); diff --git a/testing/tests/DevExpress.viz.core/tooltip.tests.js b/testing/tests/DevExpress.viz.core/tooltip.tests.js index 7865d714b8fc..60f4023836a0 100644 --- a/testing/tests/DevExpress.viz.core/tooltip.tests.js +++ b/testing/tests/DevExpress.viz.core/tooltip.tests.js @@ -632,7 +632,8 @@ QUnit.test('Show preparations. W/o customize, w/ text', function(assert) { dashStyle: 'solid', type: 'area', opacity: 0.8, - 'pointer-events': 'none' + 'pointer-events': 'none', + filter: 'shadowFilter.id' }); assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');