Skip to content

Commit

Permalink
Merge pull request #1083 from VisActor/fix/release-html
Browse files Browse the repository at this point in the history 
fix: html-plugin support release
  • Loading branch information
@neuqzxy
neuqzxy authored Mar 19, 2024
2 parents 5b9c7ad + d82496e commit 7ede75f
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 64 deletions.
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-core/fix-release-html_2024-03-19-09-56.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-core",
"comment": "fix: html-plugin support release",
"type": "none"
}
],
"packageName": "@visactor/vrender-core"
}
30 changes: 30 additions & 0 deletions packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export class HtmlAttributePlugin implements IPlugin {
pluginService: IPluginService;
_uid: number = Generator.GenAutoIncrementId();
key: string = this.name + this._uid;
lastDomContainerSet: Set<any> = new Set();
currentDomContainerSet: Set<any> = new Set();

activate(context: IPluginService): void {
this.pluginService = context;
Expand All @@ -30,6 +32,9 @@ export class HtmlAttributePlugin implements IPlugin {
context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
return item.name !== this.key;
});
application.graphicService.hooks.onRemove.unTap(this.key);
application.graphicService.hooks.onRelease.unTap(this.key);
this.release();
}

protected drawHTML(renderService: IRenderService) {
Expand All @@ -41,6 +46,14 @@ export class HtmlAttributePlugin implements IPlugin {
.forEach(group => {
this.renderGroupHTML(group as IGroup);
});
// 删掉这次不存在的节点
this.lastDomContainerSet.forEach(item => {
if (!this.currentDomContainerSet.has(item)) {
item.parentElement && item.parentElement.removeChild(item);
}
});
this.lastDomContainerSet = new Set(this.currentDomContainerSet);
this.currentDomContainerSet.clear();
}
}

Expand Down Expand Up @@ -157,5 +170,22 @@ export class HtmlAttributePlugin implements IPlugin {
// wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;
wrapGroup.style.left = `${offsetX}px`;
wrapGroup.style.top = `${offsetTop}px`;
this.currentDomContainerSet.add(wrapGroup);
}

release() {
if (application.global.env === 'browser') {
this.removeAllDom(this.pluginService.stage.defaultLayer);
this.lastDomContainerSet.clear();
this.currentDomContainerSet.clear();
}
}
removeAllDom(g: IGraphic) {
this.removeDom(g);
g.forEachChildren((item: IGraphic) => {
if (item.isContainer) {
this.removeAllDom(g);
}
});
}
}
183 changes: 119 additions & 64 deletions packages/vrender/__tests__/browser/src/pages/vchart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,76 +20,48 @@ export const page = () => {
let i = 0;

const spec = {
type: 'line',
data: {
values: [
{
time: '2:00',
value: 8
},
{
time: '4:00',
value: 9
},
{
time: '6:00',
value: 11
},
{
time: '8:00',
value: 14
},
{
time: '10:00',
value: 16
},
{
time: '12:00',
value: 17
},
{
time: '14:00',
value: 17
},
{
time: '16:00',
value: 16
},
{
time: '18:00',
value: 15
}
]
},
xField: 'time',
yField: 'value',
type: 'treemap',
color: ['#F2F6FF', '#D9E3FF', '#BFD0FF', '#A6BDFF', '#8CAAFF', '#7397FF', '#5984FF', '#4071FF', '#2E5DE5'],
label: {
visible: true,
animation: false,
style: {
// html: {
// // anchorType: 'position',
// dom: `<div>这是abcdefg<b>111</b></div>`
// // width: 100,
// // height: 60
// }
html: (_, a) => {
return {
dom: `<div style="color: red;">测试</div>`,
width: 70,
height: 60
};
}
}
},
axes: [
categoryField: 'name',
valueField: 'value',
data: [
{
type: 'band',
orient: 'bottom',
label: {
style: {
// fill: 'transparent',
stroke: 'transparent',
html: {
anchorType: 'boundsLeftTop',
dom: `<div>这是abcdefg<b>111</b></div>`,
width: 100,
height: 60
}
id: 'data0',
values: [
{
name: 'A',
value: 1
},
{
name: 'B',
value: 2
},
{
name: 'C',
value: 6
},
{
name: 'D',
value: 12
},
{
name: 'E',
value: 22
}
}
]
}
]
};
Expand All @@ -101,11 +73,94 @@ export const page = () => {
});

setTimeout(() => {
chartSpace.resize(800, 600);
chartSpace.updateSpec({
type: 'treemap',
color: ['#F2F6FF', '#D9E3FF', '#BFD0FF', '#A6BDFF', '#8CAAFF', '#7397FF', '#5984FF', '#4071FF', '#2E5DE5'],
label: {
visible: true,
style: {
html: (_, a) => {
return {
dom: `<div style="color: red;">测试</div>`,
width: 70,
height: 60
};
}
}
},
categoryField: 'name',
valueField: 'value',
data: [
{
values: [
{
name: 'A',
value: 1
},
{
name: 'B',
value: 2
},
{
name: 'C',
value: 6
},
{
name: 'D',
value: 12
},
{
name: 'E',
value: 29
}
]
}
]
});

// chartSpace.updateData('data0', [
// {
// name: 'A',
// value: 1
// },
// {
// name: 'B',
// value: 2
// },
// {
// name: 'C',
// value: 6
// },
// {
// name: 'D',
// value: 12
// },
// {
// name: 'E',
// value: 29
// }
// ]);
setTimeout(() => {
console.log(
'2',
chartSpace
.getStage()
.getElementsByType('text')
.map(item => item._uid)
);
}, 2000);
}, 3000);

chartSpace.renderSync();
console.log(
'1',
chartSpace
.getStage()
.getElementsByType('text')
.map(item => item._uid)
);
console.log(chartSpace);
window.vchart = chartSpace;

// window.BUGSERVER_SCREENSHOT();
// window.BUGSERVER_RELEASE(() => {
Expand Down

0 comments on commit 7ede75f

Please sign in to comment.