Skip to content

Commit 2f5d364

Browse files
wang1212github-actions[bot]
wang1212
and
github-actions[bot]
authored
Release (#1905)
* fix: web-components element rendering exception (#1903) * Version Packages (#1904) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 95bbcf7 commit 2f5d364

File tree

8 files changed

+134
-31
lines changed

8 files changed

+134
-31
lines changed

‎__tests__/demos/bugfix/1176.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Canvas, Rect } from '@antv/g';
2+
3+
/**
4+
* @see https://github.com/antvis/G/issues/1176
5+
*/
6+
export async function issue_1176(context: { canvas: Canvas }) {
7+
const { canvas } = context;
8+
await canvas.ready;
9+
10+
const rect1 = new Rect({
11+
style: {
12+
x: 0,
13+
y: 0,
14+
width: 45,
15+
height: 45,
16+
stroke: 'black',
17+
fill: 'red',
18+
transform: 'translate(200px, 200px)',
19+
},
20+
});
21+
const rect2 = rect1.cloneNode();
22+
rect2.style.y = 55;
23+
rect2.style.fill = '#00ff00';
24+
const rect3 = rect1.cloneNode();
25+
rect3.style.x = 55;
26+
rect3.style.y = 55;
27+
rect3.style.fill = '#0000ff';
28+
const rect4 = rect1.cloneNode();
29+
rect4.style.x = 55;
30+
rect4.style.y = 0;
31+
rect4.style.fill = '#00ffff';
32+
33+
canvas.appendChild(rect1);
34+
canvas.appendChild(rect2);
35+
canvas.appendChild(rect3);
36+
canvas.appendChild(rect4);
37+
}

‎__tests__/demos/bugfix/1882.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Canvas, Rect } from '@antv/g';
2+
import '@antv/g-web-components';
3+
4+
/**
5+
* @see https://github.com/antvis/G/issues/1882
6+
*/
7+
export async function issue_1882(context: { canvas: Canvas }) {
8+
const { canvas } = context;
9+
await canvas.ready;
10+
11+
const domContainer = (
12+
canvas.getContextService().getDomElement() as unknown as HTMLElement
13+
).parentElement;
14+
canvas.destroy();
15+
16+
domContainer.innerHTML = `
17+
<g-canvas renderer="canvas" width="400" height="400">
18+
<g-rect
19+
fill="#2f54eb"
20+
x="12"
21+
y="24"
22+
width="200"
23+
height="50"
24+
>
25+
<g-circle fill="#adc6ff" r="16" cx="25" cy="25"></g-circle>
26+
<g-text fill="#fff" x="50" y="20">我是一段文字</g-text>
27+
</g-rect>
28+
<g-html x="10" y="200" width="120" height="400">
29+
<div>
30+
<h2>hahahah</h2>
31+
<hr />
32+
<p>bsdkjfbkjsadbfkjabnjfnalsjkfnkja</p>
33+
</div>
34+
</g-html>
35+
<g-path
36+
transform="translate(0, 100)"
37+
stroke="#2f54eb"
38+
d="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
39+
></g-path>
40+
</g-canvas>
41+
`;
42+
}

‎__tests__/demos/bugfix/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export { gradient_text } from './1572';
88
export { zoom } from './1667';
99
export { test_pick } from './1747';
1010
export { issue_1760 } from './1760';
11+
export { issue_1176 } from './1176';
12+
export { issue_1882 } from './1882';
1113
export { textWordWrap } from './textWordWrap';
1214
export { group_with_stroke } from './group-with-stroke';
1315
export { switchRenderer } from './switch-renderer';

‎packages/g-web-components/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @antv/g-web-components
22

3+
## 2.0.45
4+
5+
### Patch Changes
6+
7+
- 3bb1714: fix: web-components element rendering exception
8+
39
## 2.0.44
410

511
### Patch Changes

‎packages/g-web-components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-web-components",
3-
"version": "2.0.44",
3+
"version": "2.0.45",
44
"description": "A declarative usage for G implemented with WebComponents",
55
"keywords": [
66
"antv",

‎packages/g-web-components/src/shape/HTML.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,25 @@ import { BaseShape } from './BaseShape';
55
export class HTMLShape extends BaseShape {
66
connectedCallback(): void {
77
super.connectedCallback();
8-
const observer = new MutationObserver(() => {
9-
const egl = this.gElement as any;
8+
9+
function updateHTML(shape: HTMLShape) {
10+
const egl = shape.gElement as any;
1011
const targetEl = egl?.getDomElement();
1112
if (targetEl) {
12-
targetEl.innerHTML = this.innerHTML;
13+
targetEl.innerHTML = shape.innerHTML;
1314
}
15+
}
16+
17+
const observer = new MutationObserver(() => {
18+
updateHTML(this);
1419
});
1520
observer.observe(this, {
1621
characterData: true,
1722
childList: true,
1823
characterDataOldValue: true,
1924
});
25+
26+
updateHTML(this);
2027
}
2128
getElementInstance() {
2229
const shape = new HTML({

‎site/examples/ecosystem/declarative/demo/web-components-react.tsx

+29-20
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
// @ts-nocheck
12
import { Ellipse } from '@antv/g';
23
import '@antv/g-canvas';
34
import '@antv/g-web-components';
45
import React, { useEffect, useRef } from 'react';
56
import ReactDOM from 'react-dom';
67

7-
const App = () => {
8+
function App() {
89
const ellipseRef = useRef(null);
910

1011
useEffect(() => {
@@ -25,45 +26,52 @@ const App = () => {
2526

2627
return (
2728
<g-canvas renderer="canvas" width="400" height="400">
28-
<g-rect fill="#2f54eb" radius="0 24px 24px" x="12px" y="24px" width="200px" height="50px">
29-
<g-circle fill="#adc6ff" r="16px" cx="25px" cy="25px"></g-circle>
30-
<g-text fill="#fff" x="50px" y="20px">
29+
<g-rect
30+
fill="#2f54eb"
31+
radius="0 24 24"
32+
x="12"
33+
y="24"
34+
width="200"
35+
height="50"
36+
>
37+
<g-circle fill="#adc6ff" r="16" cx="25" cy="25" />
38+
<g-text fill="#fff" x="50" y="20">
3139
我是一段文字
3240
</g-text>
3341
</g-rect>
3442
<g-ellipse
3543
fill="#adc6ff"
3644
stroke="red"
37-
stroke-width="4px"
38-
rx="40px"
39-
ry="20px"
40-
cx="280px"
41-
cy="40px"
45+
stroke-width="4"
46+
rx="40"
47+
ry="20"
48+
cx="280"
49+
cy="40"
4250
ref={ellipseRef}
43-
></g-ellipse>
51+
/>
4452
<g-image
4553
src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
46-
x="12px"
47-
y="200px"
48-
width="200px"
49-
height="200px"
54+
x="12"
55+
y="200"
56+
width="200"
57+
height="200"
5058
transform="scale(0.5)"
51-
></g-image>
59+
/>
5260
<g-line
5361
x1="360"
5462
y1="20"
5563
x2="360"
5664
y2="120"
5765
line-cap="round"
5866
stroke="black"
59-
stroke-width="10px"
67+
stroke-width="10"
6068
stroke-dasharray="5 5"
61-
></g-line>
69+
/>
6270
<g-path
63-
transform="translate(0, 100px)"
71+
transform="translate(0, 100)"
6472
stroke="#2f54eb"
6573
path="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
66-
></g-path>
74+
/>
6775
<g-html x="10" y="200" width="120" height="400">
6876
<div>
6977
<h2>hahahah</h2>
@@ -73,6 +81,7 @@ const App = () => {
7381
</g-html>
7482
</g-canvas>
7583
);
76-
};
84+
}
7785

86+
// eslint-disable-next-line react/no-deprecated
7887
ReactDOM.render(<App />, document.getElementById('container'));

‎site/examples/ecosystem/declarative/demo/web-components.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import '@antv/g-web-components';
55
const $wrapper = document.getElementById('container');
66
$wrapper.innerHTML = `
77
<g-canvas renderer="canvas" width="400" height="400">
8-
<g-rect fill="#2f54eb" radius="0 24px 24px" x="12px" y="24px" width="200px" height="50px">
9-
<g-circle fill="#adc6ff" r="16px" cx="25px" cy="25px"></g-circle>
10-
<g-text fill="#fff" x="50px" y="20px">我是一段文字</g-text>
8+
<g-rect fill="#2f54eb" radius="0 24 24" x="12" y="24" width="200" height="50">
9+
<g-circle fill="#adc6ff" r="16" cx="25" cy="25"></g-circle>
10+
<g-text fill="#fff" x="50" y="20">我是一段文字</g-text>
1111
</g-rect>
12-
<g-ellipse fill="#adc6ff" stroke="red" stroke-width="4px" rx="40px" ry="20px" cx="280px" cy="40px"></g-ellipse>
13-
<g-image src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ" x="12px" y="200px" width="200px" height="200px" transform="scale(0.5)"></g-image>
14-
<g-line x1="360" y1="20" x2="360" y2="120" line-cap="round" stroke="black" stroke-width="10px" stroke-dasharray="5 5"></g-line>
12+
<g-ellipse fill="#adc6ff" stroke="red" stroke-width="4" rx="40" ry="20" cx="280" cy="40"></g-ellipse>
13+
<g-image src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ" x="12" y="200" width="200" height="200" transform="scale(0.5)"></g-image>
14+
<g-line x1="360" y1="20" x2="360" y2="120" line-cap="round" stroke="black" stroke-width="10" stroke-dasharray="5 5"></g-line>
1515
<g-path
16-
transform="translate(0, 100px)"
16+
transform="translate(0, 100)"
1717
stroke="#2f54eb"
1818
path="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
1919
></g-path>

0 commit comments

Comments
 (0)