Skip to content

Commit 3dacde8

Browse files
wang1212github-actions[bot]
wang1212
and
github-actions[bot]
authored
Release (#1923)
* fix: element z-index sorting rendering abnormality (#1921) * chore(release): bump version (#1922) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent c9905e3 commit 3dacde8

File tree

100 files changed

+581
-95
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+581
-95
lines changed

‎__tests__/demos/bugfix/1910.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Canvas, Text, CanvasEvent } from '@antv/g';
2+
import { Renderer } from '@antv/g-canvas';
3+
4+
// const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
5+
// const randomLetter = () => letters.charAt(Math.floor(Math.random() * 26));
6+
7+
/**
8+
* @see https://github.com/antvis/G/issues/1910
9+
*/
10+
export async function issue_1910(context: { canvas: Canvas }) {
11+
const { canvas } = context;
12+
console.log(canvas);
13+
14+
canvas.setRenderer(
15+
new Renderer({
16+
enableAutoRendering: false,
17+
}),
18+
);
19+
20+
const canvasDom = canvas
21+
.getContextService()
22+
.getDomElement() as unknown as HTMLCanvasElement;
23+
const btnDom = document.createElement('button');
24+
btnDom.style.cssText =
25+
'position: absolute; top: 0px; left: 600px; width: 120px; height: 32px';
26+
btnDom.textContent = 'trigger render';
27+
28+
canvasDom.parentElement.appendChild(btnDom);
29+
30+
const text1 = new Text({
31+
style: {
32+
x: 100,
33+
y: 200,
34+
text: 'A',
35+
fontSize: 16,
36+
fill: '#f00',
37+
zIndex: 1, // zIndex 为 0 或不配置时，一切正常
38+
},
39+
});
40+
41+
const text2 = new Text({
42+
style: {
43+
x: 100,
44+
y: 300,
45+
text: 'B',
46+
fontSize: 16,
47+
fill: '#000',
48+
},
49+
});
50+
51+
canvas.addEventListener(CanvasEvent.READY, () => {
52+
canvas.appendChild(text1);
53+
canvas.appendChild(text2);
54+
canvas.render();
55+
56+
btnDom.onclick = () => {
57+
canvas.removeChild(text1);
58+
canvas.removeChild(text2);
59+
console.log('removed');
60+
61+
canvas.render(); // 添加这行代码后不会出现锯齿，但会有图元丢失问题
62+
63+
// text1.style.text = randomLetter();
64+
text1.style.zIndex = Math.round(Math.random());
65+
// text2.style.text = randomLetter();
66+
67+
canvas.appendChild(text1);
68+
canvas.appendChild(text2);
69+
console.log('appended');
70+
71+
canvas.render();
72+
};
73+
});
74+
}

‎__tests__/demos/bugfix/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export { issue_1760 } from './1760';
1111
export { issue_1176 } from './1176';
1212
export { issue_1882 } from './1882';
1313
export { issue_1906 } from './1906';
14+
export { issue_1910 } from './1910';
1415
export { issue_1911 } from './1911';
1516
export { textWordWrap } from './textWordWrap';
1617
export { group_with_stroke } from './group-with-stroke';

‎packages/g-camera-api/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @antv/g-camera-api
22

3+
## 2.0.36
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-lite@2.2.17
9+
310
## 2.0.35
411

512
### Patch Changes

‎packages/g-camera-api/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-camera-api",
3-
"version": "2.0.35",
3+
"version": "2.0.36",
44
"description": "A simple implementation of Camera API.",
55
"keywords": [
66
"antv",

‎packages/g-canvas/CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# @antv/g-canvas
22

3+
## 2.0.41
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-plugin-canvas-renderer@2.2.20
9+
- @antv/g-lite@2.2.17
10+
- @antv/g-plugin-canvas-picker@2.1.20
11+
- @antv/g-plugin-canvas-path-generator@2.1.17
12+
- @antv/g-plugin-dom-interaction@2.1.22
13+
- @antv/g-plugin-html-renderer@2.1.22
14+
- @antv/g-plugin-image-loader@2.1.20
15+
316
## 2.0.40
417

518
### Patch Changes

‎packages/g-canvas/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-canvas",
3-
"version": "2.0.40",
3+
"version": "2.0.41",
44
"description": "A renderer implemented by Canvas 2D API",
55
"keywords": [
66
"antv",

‎packages/g-canvaskit/CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# @antv/g-canvaskit
22

3+
## 1.0.40
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-plugin-canvaskit-renderer@2.1.20
9+
- @antv/g-lite@2.2.17
10+
- @antv/g-plugin-canvas-picker@2.1.20
11+
- @antv/g-plugin-canvas-path-generator@2.1.17
12+
- @antv/g-plugin-dom-interaction@2.1.22
13+
- @antv/g-plugin-html-renderer@2.1.22
14+
- @antv/g-plugin-image-loader@2.1.20
15+
316
## 1.0.39
417

518
### Patch Changes

‎packages/g-canvaskit/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-canvaskit",
3-
"version": "1.0.39",
3+
"version": "1.0.40",
44
"description": "A renderer implemented by CanvasKit",
55
"keywords": [
66
"antv",

‎packages/g-components/CHANGELOG.md

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

3+
## 2.0.33
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-lite@2.2.17
9+
310
## 2.0.32
411

512
### Patch Changes

‎packages/g-components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-components",
3-
"version": "2.0.32",
3+
"version": "2.0.33",
44
"description": "Components for g",
55
"keywords": [
66
"antv",

‎packages/g-dom-mutation-observer-api/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @antv/g-dom-mutation-observer-api
22

3+
## 2.0.33
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-lite@2.2.17
9+
310
## 2.0.32
411

512
### Patch Changes

‎packages/g-dom-mutation-observer-api/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-dom-mutation-observer-api",
3-
"version": "2.0.32",
3+
"version": "2.0.33",
44
"description": "A simple implementation of DOM MutationObserver API.",
55
"keywords": [
66
"antv",

‎packages/g-gesture/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @antv/g-gesture
22

3+
## 3.0.33
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-lite@2.2.17
9+
310
## 3.0.32
411

512
### Patch Changes

‎packages/g-gesture/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-gesture",
3-
"version": "3.0.32",
3+
"version": "3.0.33",
44
"description": "G Gesture",
55
"keywords": [
66
"antv",

‎packages/g-image-exporter/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @antv/g-image-exporter
22

3+
## 1.0.33
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [802cf7d]
8+
- @antv/g-lite@2.2.17
9+
310
## 1.0.32
411

512
### Patch Changes

‎packages/g-image-exporter/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-image-exporter",
3-
"version": "1.0.32",
3+
"version": "1.0.33",
44
"description": "A image exporter for G using DOM API",
55
"keywords": [
66
"antv",

‎packages/g-lite/CHANGELOG.md

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

3+
## 2.2.17
4+
5+
### Patch Changes
6+
7+
- 802cf7d: fix: element z-index sorting rendering abnormality
8+
39
## 2.2.16
410

511
### Patch Changes

‎packages/g-lite/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/g-lite",
3-
"version": "2.2.16",
3+
"version": "2.2.17",
44
"description": "A core module for rendering engine implements DOM API.",
55
"keywords": [
66
"antv",

‎packages/g-lite/src/services/RenderingService.ts

+29-14
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,10 @@ export class RenderingService {
274274
internalRenderSingleDisplayObject(currentObject);
275275

276276
// recursive rendering its children
277-
const objects = currentObject.sortable.sorted || currentObject.childNodes;
277+
const objects =
278+
currentObject.sortable?.sorted?.length > 0
279+
? currentObject.sortable.sorted
280+
: currentObject.childNodes;
278281
for (let i = objects.length - 1; i >= 0; i--) {
279282
stack.push(objects[i] as unknown as DisplayObject);
280283
}
@@ -288,26 +291,38 @@ export class RenderingService {
288291
) {
289292
// avoid re-sorting the whole children list
290293
sortable.dirtyChildren.forEach((child) => {
294+
// remove from sorted list
295+
const sortIndex = sortable.sorted.indexOf(child);
296+
if (sortIndex > -1) {
297+
sortable.sorted.splice(sortIndex, 1);
298+
}
299+
291300
const index = displayObject.childNodes.indexOf(child as IChildNode);
292-
if (index === -1) {
293-
// remove from sorted list
294-
const index = sortable.sorted.indexOf(child);
295-
if (index >= 0) {
296-
sortable.sorted.splice(index, 1);
301+
if (index > -1) {
302+
if (sortable.sorted.length === 0) {
303+
sortable.sorted.push(child);
304+
} else {
305+
const index = sortedIndex(
306+
sortable.sorted as IElement[],
307+
child as IElement,
308+
);
309+
sortable.sorted.splice(index, 0, child);
297310
}
298-
} else if (sortable.sorted.length === 0) {
299-
sortable.sorted.push(child);
300-
} else {
301-
const index = sortedIndex(
302-
sortable.sorted as IElement[],
303-
child as IElement,
304-
);
305-
sortable.sorted.splice(index, 0, child);
306311
}
307312
});
308313
} else {
309314
sortable.sorted = displayObject.childNodes.slice().sort(sortByZIndex);
310315
}
316+
317+
// When the child elements are changed and sorted, if there are no more stacked elements in the child elements (i.e. zIndex != 0), clear the sort list
318+
if (
319+
sortable.sorted?.length > 0 &&
320+
displayObject.childNodes.filter(
321+
(child: IElement) => child.parsedStyle.zIndex,
322+
).length === 0
323+
) {
324+
sortable.sorted = [];
325+
}
311326
}
312327

313328
destroy() {

0 commit comments

Comments
 (0)