test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-01 19:28:39 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: adapt g optimization

Browse Source
This commit is contained in:
antv 2024-10-24 14:31:18 +08:00
parent 80c1bca893
commit 72024181bf
36 changed files with 153 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -30,8 +30,8 @@
]
},
"devDependencies": {
"@antv/g-canvas": "^2.0.12",
"@antv/g-plugin-rough-canvas-renderer": "^2.0.13",
"@antv/g-canvas": "^2.0.18",
"@antv/g-plugin-rough-canvas-renderer": "^2.0.18",
"@babel/core": "^7.25.2",
"@babel/plugin-transform-typescript": "^7.25.2",
"@changesets/cli": "^2.27.8",

10
packages/cli/template-extension/package.json
View File

@ -35,9 +35,9 @@
"@antv/g6": "^5.0.0"
},
"devDependencies": {
"@antv/g": "^6.0.13",
"@antv/g-canvas": "^2.0.4",
"@antv/g-svg": "^2.0.5",
"@antv/g": "^6.1.2",
"@antv/g-canvas": "^2.0.18",
"@antv/g-svg": "^2.0.15",
"@commitlint/config-conventional": "^19.2.2",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
@ -71,7 +71,7 @@
"xmlserializer": "^0.6.1"
},
"peerDependencies": {
"@antv/g": "^6.0.13",
"@antv/g-canvas": "^2.0.4"
"@antv/g": "^6.1.2",
"@antv/g-canvas": "^2.0.18"
}
}

18
packages/g6-extension-3d/package.json
View File

@ -34,22 +34,22 @@
},
"dependencies": {
"@antv/g-device-api": "^1.6.12",
"@antv/g-plugin-3d": "^2.0.14",
"@antv/g-plugin-device-renderer": "^2.0.14",
"@antv/g-plugin-dragndrop": "^2.0.9",
"@antv/g-webgl": "^2.0.16",
"@antv/g-plugin-3d": "^2.0.20",
"@antv/g-plugin-device-renderer": "^2.1.2",
"@antv/g-plugin-dragndrop": "^2.0.13",
"@antv/g-webgl": "^2.0.22",
"@antv/layout": "^1.2.14-beta.7",
"@antv/util": "^3.3.8"
},
"devDependencies": {
"@antv/g": "^6.0.13",
"@antv/g-canvas": "^2.0.12",
"@antv/g": "^6.1.2",
"@antv/g-canvas": "^2.0.18",
"@antv/g6": "workspace:*"
},
"peerDependencies": {
"@antv/g": "^6.0.13",
"@antv/g-canvas": "^2.0.4",
"@antv/g6": "^5.0.26"
"@antv/g": "^6.1.2",
"@antv/g-canvas": "^2.0.18",
"@antv/g6": "^workspace:*"
},
"publishConfig": {
"access": "public",

6
packages/g6-extension-react/package.json
View File

@ -35,8 +35,8 @@
"type-check": "tsc --noEmit -p tsconfig.test.json"
},
"dependencies": {
"@antv/g": "^6.0.13",
"@antv/g-svg": "^2.0.11",
"@antv/g": "^6.1.2",
"@antv/g-svg": "^2.0.15",
"@antv/react-g": "^2.0.14"
},
"devDependencies": {
@ -51,7 +51,7 @@
"styled-components": "^6.1.13"
},
"peerDependencies": {
"@antv/g6": "^5.0.26",
"@antv/g6": "^workspace:*",
"react": ">=16.8",
"react-dom": ">=16.8"
},

2
packages/g6/__tests__/bugs/element-port-rotate.spec.ts
View File

@ -17,7 +17,7 @@ describe('element port rotate', () => {
{ key: 'port-2', placement: 'left' },
{ key: 'port-3', placement: [0, 0.85] },
],
transform: 'rotate(45deg)',
transform: [['rotate', 45]],
},
},
});

2
packages/g6/__tests__/demos/case-fund-flow.ts
View File

@ -107,7 +107,7 @@ export const caseFundFlow: TestCase = async (context) => {
fontFamily: 'iconfont',
fontSize: 16,
text: '\ue62d',
transform: this.data.variableUp ? '' : 'rotate(180deg)',
transform: this.data.variableUp ? [] : [['rotate', 180]],
};
}

2
packages/g6/__tests__/demos/case-mindmap.ts
View File

@ -124,7 +124,7 @@ export const caseMindmap: TestCase = async (context) => {
fontSize: 8,
text: '\ue6e4',
textAlign: 'center',
transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
visibility: showIcon ? 'visible' : 'hidden',
x: direction === 'left' ? -6 : width + 6,
y: height,

10
packages/g6/__tests__/demos/case-org-chart.ts
View File

@ -37,14 +37,14 @@ export const caseOrgChart: TestCase = async (context) => {
fontSize: 20,
fontWeight: 600,
textAlign: 'center',
transform: 'translate(0,0)',
transform: [['translate', 0, 0]],
}
: {
fill: '#2078B4',
fontSize: 14,
fontWeight: 400,
textAlign: 'left',
transform: 'translate(-65, -15)',
transform: [['translate', -65, -15]],
};
return { text, ...labelStyle } as LabelStyleProps;
}
@ -65,7 +65,7 @@ export const caseOrgChart: TestCase = async (context) => {
textTransform: 'uppercase',
fill: '#343f4a',
textAlign: 'left',
transform: 'translate(-65, 0)',
transform: [['translate', -65, 0]],
};
}
@ -80,7 +80,7 @@ export const caseOrgChart: TestCase = async (context) => {
text: this.data.status,
fontSize: 8,
textAlign: 'left',
transform: 'translate(40, -16)',
transform: [['translate', 40, -16]],
padding: [0, 4],
fill: '#fff',
backgroundFill: statusColors[this.data.status as string],
@ -99,7 +99,7 @@ export const caseOrgChart: TestCase = async (context) => {
fontSize: 8,
fontWeight: 300,
textAlign: 'left',
transform: 'translate(-65, 20)',
transform: [['translate', -65, 20]],
};
}

2
packages/g6/__tests__/demos/element-edge-custom-arrow.ts
View File

@ -29,7 +29,7 @@ export const elementEdgeCustomArrow: TestCase = async (context) => {
style: {
endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
endArrowSize: 28,
endArrowTransform: 'rotate(90deg)',
endArrowTransform: [['rotate', 90]],
endArrowX: -14,
endArrowY: -14,
},

2
packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts
View File

@ -12,7 +12,7 @@ export const layoutCompactBoxLeftAlign: TestCase = async (context) => {
labelText: (data) => data.id,
labelPlacement: 'right',
labelMaxWidth: 200,
transform: 'rotate(90deg)',
transform: [['rotate', 90]],
size: 26,
fill: '#EFF4FF',
lineWidth: 1,

2
packages/g6/__tests__/demos/layout-dendrogram-tb.ts
View File

@ -15,7 +15,7 @@ export const layoutDendrogramTb: TestCase = async (context) => {
labelText: model.id,
labelTextAlign: 'start',
labelTextBaseline: hasChildren ? 'middle' : 'bottom',
transform: hasChildren ? '' : 'rotate(90)',
transform: hasChildren ? [] : [['rotate', 90]],
ports: [{ placement: 'bottom' }, { placement: 'top' }],
};
},

34
packages/g6/__tests__/unit/utils/edge.spec.ts
View File

@ -52,30 +52,35 @@ describe('edge', () => {
const labelPlacement = getLabelPositionStyle(line, 'center', false, 0, 0);
expect(labelPlacement.textAlign).toEqual('center');
expect(labelPlacement.transform).toEqual('translate(50, 100)');
expect(labelPlacement.transform).toEqual([['translate', 50, 100]]);
const labelPosition2 = getLabelPositionStyle(line, 'center', true, 5, 5);
expect(labelPosition2.textAlign).toEqual('center');
expect(labelPosition2.transform).toEqual('translate(55, 105)');
expect(labelPosition2.transform).toEqual([['translate', 55, 105]]);
const labelPosition3 = getLabelPositionStyle(line, 'start', true, 5, 5);
expect(labelPosition3.textAlign).toEqual('left');
expect(labelPosition3.transform).toEqual('translate(5, 105)');
expect(labelPosition3.transform).toEqual([['translate', 5, 105]]);
const labelPosition4 = getLabelPositionStyle(line, 'end', true, 5, 5);
expect(labelPosition4.textAlign).toEqual('right');
expect(labelPosition4.transform).toEqual('translate(104, 105)');
expect(labelPosition4.transform).toEqual([['translate', 104, 105]]);
const labelPosition5 = getLabelPositionStyle(line, 0.5, true, 5, 5);
expect(labelPosition5.textAlign).toEqual('center');
expect(labelPosition5.transform).toEqual('translate(55, 105)');
expect(labelPosition5.transform).toEqual([['translate', 55, 105]]);
// with rotation angle below Math.PI
const labelPosition6 = getLabelPositionStyle(line1, 'center', true, 5, 5);
expect(labelPosition6.textAlign).toEqual('center');
expect(labelPosition6.transform).toEqual(
`translate(${50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4)}, ${150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4)}) rotate(45deg)`,
);
expect(labelPosition6.transform).toEqual([
[
'translate',
50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4),
150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4),
],
['rotate', 45],
]);
const labelPosition7 = getLabelPositionStyle(line1, 'start', true, 5, 5);
expect(labelPosition7.textAlign).toEqual('left');
@ -86,9 +91,14 @@ describe('edge', () => {
// with rotation angle over Math.PI
const labelPosition9 = getLabelPositionStyle(line2, 'center', true, 5, 5);
expect(labelPosition9.textAlign).toEqual('center');
expect(labelPosition9.transform).toEqual(
`translate(${50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4)}, ${150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4)}) rotate(-45deg)`,
);
expect(labelPosition9.transform).toEqual([
[
'translate',
50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4),
150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4),
],
['rotate', -45],
]);
});
});
@ -100,7 +110,7 @@ describe('edge', () => {
};
expect(getBadgePositionStyle(shapeMap, 'prefix', 'center', 10, 0)).toEqual({
textAlign: 'center',
transform: 'translate(50, 0)',
transform: [['translate', 50, 0]],
});
});

16
packages/g6/__tests__/unit/utils/element.spec.ts
View File

@ -171,45 +171,45 @@ describe('element', () => {
it('getTextStyleByPlacement', () => {
expect(getTextStyleByPlacement(bbox, 'left')).toEqual({
transform: 'translate(100, 150)',
transform: [['translate', 100, 150]],
textAlign: 'right',
textBaseline: 'middle',
});
expect(getTextStyleByPlacement(bbox, 'right')).toEqual({
transform: 'translate(200, 150)',
transform: [['translate', 200, 150]],
textAlign: 'left',
textBaseline: 'middle',
});
expect(getTextStyleByPlacement(bbox, 'top')).toEqual({
transform: 'translate(150, 100)',
transform: [['translate', 150, 100]],
textAlign: 'center',
textBaseline: 'bottom',
});
expect(getTextStyleByPlacement(bbox, 'bottom')).toEqual({
transform: 'translate(150, 200)',
transform: [['translate', 150, 200]],
textAlign: 'center',
textBaseline: 'top',
});
expect(getTextStyleByPlacement(bbox, 'left-top')).toEqual({
transform: 'translate(100, 100)',
transform: [['translate', 100, 100]],
textAlign: 'right',
textBaseline: 'bottom',
});
expect(getTextStyleByPlacement(bbox, 'right-bottom')).toEqual({
transform: 'translate(200, 200)',
transform: [['translate', 200, 200]],
textAlign: 'left',
textBaseline: 'top',
});
expect(getTextStyleByPlacement(bbox, 'center')).toEqual({
transform: 'translate(150, 150)',
transform: [['translate', 150, 150]],
textAlign: 'center',
textBaseline: 'middle',
});
expect(getTextStyleByPlacement(bbox)).toEqual({
transform: 'translate(150, 200)',
transform: [['translate', 150, 200]],
textAlign: 'center',
textBaseline: 'top',
});

21
packages/g6/__tests__/unit/utils/polygon.spec.ts
View File

@ -1,4 +1,5 @@
import { getPolygonTextStyleByPlacement } from '@/src/utils/polygon';
import type { TransformArray } from '@antv/g';
import { AABB, Path } from '@antv/g';
import type { PathArray } from '@antv/util';
@ -15,29 +16,29 @@ describe('polygon', () => {
expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, false, EMPTY_PATH, false)).toEqual({
textAlign: 'center',
textBaseline: 'bottom',
transform: 'translate(50, 0)',
transform: [['translate', 50, 0]],
});
expect(getPolygonTextStyleByPlacement(bounds, 'left', 0, 0, false, EMPTY_PATH, false)).toEqual({
textAlign: 'right',
textBaseline: 'middle',
transform: 'translate(0, 50)',
transform: [['translate', 0, 50]],
});
expect(getPolygonTextStyleByPlacement(bounds, 'right', 0, 0, false, EMPTY_PATH, false)).toEqual({
textAlign: 'left',
textBaseline: 'middle',
transform: 'translate(100, 50)',
transform: [['translate', 100, 50]],
});
expect(getPolygonTextStyleByPlacement(bounds, 'bottom', 0, 0, false, EMPTY_PATH, false)).toEqual({
textAlign: 'center',
textBaseline: 'top',
transform: 'translate(50, 100)',
transform: [['translate', 50, 100]],
});
// with offset
expect(getPolygonTextStyleByPlacement(bounds, 'top', 10, 10, false, EMPTY_PATH, false)).toEqual({
textAlign: 'center',
textBaseline: 'bottom',
transform: 'translate(60, 10)',
transform: [['translate', 60, 10]],
});
// closeToHull and autoRotate
@ -48,7 +49,7 @@ describe('polygon', () => {
expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, true, circle, true)).toEqual({
textAlign: 'center',
textBaseline: 'bottom',
transform: 'translate(50, 0)',
transform: [['translate', 50, 0]],
});
const d: PathArray = [
@ -62,21 +63,21 @@ describe('polygon', () => {
const labelStyle1 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'top', 0, 0, true, d, true);
expect(labelStyle1.textAlign).toBe('center');
expect(labelStyle1.textBaseline).toBe('bottom');
expect(labelStyle1.transform).toContain('rotate');
expect((labelStyle1.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
const labelStyle2 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'right', 0, 0, true, d, true);
expect(labelStyle2.textAlign).toBe('center');
expect(labelStyle2.textBaseline).toBe('top');
expect(labelStyle2.transform).toContain('rotate');
expect((labelStyle2.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
const labelStyle3 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'bottom', 0, 0, true, d, true);
expect(labelStyle3.textAlign).toBe('center');
expect(labelStyle3.textBaseline).toBe('top');
expect(labelStyle3.transform).toContain('rotate');
expect((labelStyle3.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
const labelStyle4 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'left', 0, 0, true, d, true);
expect(labelStyle4.textAlign).toBe('center');
expect(labelStyle4.textBaseline).toBe('top');
expect(labelStyle4.transform).toContain('rotate');
expect((labelStyle4.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
});
});

2
packages/g6/__tests__/unit/utils/style.spec.ts
View File

@ -53,7 +53,7 @@ describe('style', () => {
x: 100,
y: 100,
class: 'node',
transform: 'translate(100, 100)',
transform: [['translate', 100, 100]],
zIndex: 100,
fill: 'pink',
};

14
packages/g6/package.json
View File

@ -58,11 +58,11 @@
},
"dependencies": {
"@antv/algorithm": "^0.1.26",
"@antv/component": "^2.0.4",
"@antv/component": "^2.1.0",
"@antv/event-emitter": "^0.1.3",
"@antv/g": "^6.0.13",
"@antv/g-canvas": "^2.0.12",
"@antv/g-plugin-dragndrop": "^2.0.9",
"@antv/g": "^6.1.2",
"@antv/g-canvas": "^2.0.18",
"@antv/g-plugin-dragndrop": "^2.0.13",
"@antv/graphlib": "^2.0.3",
"@antv/hierarchy": "^0.6.13",
"@antv/layout": "^1.2.14-beta.8",
@ -71,8 +71,8 @@
"hull.js": "^1.0.6"
},
"devDependencies": {
"@antv/g-svg": "^2.0.11",
"@antv/g-webgl": "^2.0.16",
"@antv/g-svg": "^2.0.15",
"@antv/g-webgl": "^2.0.22",
"@antv/layout-gpu": "^1.1.7",
"@antv/layout-wasm": "^1.4.2",
"@types/hull.js": "^1.0.4",
@ -88,7 +88,7 @@
"limit-size": [
{
"gzip": true,
"limit": "310 Kb",
"limit": "320 Kb",
"path": "dist/g6.min.js"
},
{

1
packages/g6/src/animations/executor.ts
View File

@ -66,6 +66,7 @@ export const executor: AnimationExecutor = (element, keyframes, options) => {
if (keyframes.some((keyframe) => Object.keys(keyframe).some((attr) => ['x', 'y', 'z'].includes(attr)))) {
const { x = 0, y = 0, z = 0, transform = '' } = shape.attributes || {};
keyframes.forEach((keyframe) => {
// @ts-expect-error ignore type error
keyframe.transform = replaceTranslateInTransform(
(keyframe.x as number) || (x as number),
(keyframe.y as number) || (y as number),

2
packages/g6/src/elements/combos/base-combo.ts
View File

@ -226,7 +226,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
const { zIndex = this.getComboZIndex(attributes) } = attributes;
const [x, y] = this.getComboPosition(attributes);
// x/y will be used to calculate position later.
return { x, y, transform: `translate(${x}, ${y})`, zIndex };
return { x, y, transform: [['translate', x, y]], zIndex };
}
protected updateComboPosition(attributes: Required<S>) {

2
packages/g6/src/elements/nodes/base-node.ts
View File

@ -323,7 +323,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
portsShapeStyle[key] = false;
} else {
const [x, y] = this.getPortXY(attributes, option);
portsShapeStyle[key] = { transform: `translate(${x}, ${y})`, ...mergedStyle };
portsShapeStyle[key] = { transform: [['translate', x, y]], ...mergedStyle };
}
});
return portsShapeStyle;

2
packages/g6/src/elements/shapes/base-shape.ts
View File

@ -188,7 +188,7 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
const { x: _x = 0, y: _y = 0, z: _z = 0 } = this.attributes as Record<string, any>;
keyframes.forEach((keyframe) => {
const { x = _x, y = _y, z = _z } = keyframe;
Object.assign(keyframe, { transform: replaceTranslateInTransform(+x, +y, +z) });
Object.assign(keyframe, { transform: z ? [['translate3d', x, y, z]] : [['translate', x, y]] });
});
}

2
packages/g6/src/preset.ts
View File

@ -1,5 +1,3 @@
import { runtime } from '@antv/g';
import { registerBuiltInExtensions } from './registry/build-in';
runtime.enableCSSParsing = false;
registerBuiltInExtensions();

4
packages/g6/src/runtime/element.ts
View File

@ -134,6 +134,9 @@ export class ElementController {
private computeElementDefaultStyle(elementType: ElementType, context: StyleIterationContext) {
const { options } = this.context;
const defaultStyle = options[elementType]?.style || {};
if ('transform' in defaultStyle && Array.isArray(defaultStyle.transform)) {
defaultStyle.transform = [...defaultStyle.transform];
}
this.defaultStyle[idOf(context.datum)] = computeElementCallbackStyle(defaultStyle as any, context);
}
@ -387,7 +390,6 @@ export class ElementController {
const targetZIndex = this.getElementZIndex(context.target!);
if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0);
}
const element = this.container.appendChild(
new Ctor({
id,

9
packages/g6/src/transforms/place-radial-labels.ts
View File

@ -1,3 +1,4 @@
import type { TransformArray } from '@antv/g';
import { rad2deg } from '@antv/g';
import type { RuntimeContext } from '../runtime/types';
import type { NodeData } from '../spec';
@ -56,8 +57,10 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
const nodeHalfWidth = parseSize(graph.getElementRenderStyle(idOf(datum)).size)[0] / 2;
const offset = (isLeaf ? 1 : -1) * (nodeHalfWidth + this.options.offset);
const translate = `translate(${offset * Math.cos(radian)},${offset * Math.sin(radian)})`;
const rotate = `rotate(${isLeft ? rad2deg(radian) + 180 : rad2deg(radian)}deg)`;
const labelTransform: TransformArray = [
['translate', offset * Math.cos(radian), offset * Math.sin(radian)],
['rotate', isLeft ? rad2deg(radian) + 180 : rad2deg(radian)],
];
model.updateNodeData([
{
@ -65,7 +68,7 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
style: {
labelTextAlign: isLeft === isLeaf ? 'right' : 'left',
labelTextBaseline: 'middle',
labelTransform: `${translate} ${rotate}`,
labelTransform,
},
},
]);

9
packages/g6/src/utils/edge.ts
View File

@ -1,4 +1,4 @@
import type { AABB, DisplayObject } from '@antv/g';
import type { AABB, DisplayObject, TransformArray } from '@antv/g';
import type { PathArray } from '@antv/util';
import { isEqual, isNumber } from '@antv/util';
import type { EdgeData } from '../spec';
@ -57,7 +57,7 @@ export function getLabelPositionStyle(
if (isHorizontal(point, pointOffset) || !autoRotate) {
const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY);
return { transform: `translate(${x}, ${y})`, textAlign };
return { transform: [['translate', x, y]], textAlign };
}
let angle = Math.atan2(pointOffset[1] - point[1], pointOffset[0] - point[0]);
@ -70,7 +70,10 @@ export function getLabelPositionStyle(
}
const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY, angle);
const transform = `translate(${x}, ${y}) rotate(${(angle / Math.PI) * 180}deg)`;
const transform: TransformArray = [
['translate', x, y],
['rotate', (angle / Math.PI) * 180],
];
return {
textAlign,

2
packages/g6/src/utils/element.ts
View File

@ -301,7 +301,7 @@ export function getTextStyleByPlacement(
}
return {
transform: `translate(${x + offsetX}, ${y + offsetY})`,
transform: [['translate', x + offsetX, y + offsetY]],
textBaseline,
textAlign,
};

6
packages/g6/src/utils/polygon.ts
View File

@ -32,7 +32,7 @@ export function getPolygonTextStyleByPlacement(
const style: Partial<TextStyleProps> = {
textAlign: placement === 'left' ? 'right' : placement === 'right' ? 'left' : 'center',
textBaseline: placement === 'top' ? 'bottom' : placement === 'bottom' ? 'top' : 'middle',
transform: `translate(${x + offsetX}, ${y + offsetY})`,
transform: [['translate', x + offsetX, y + offsetY]],
};
if (placement === 'center' || !closeToContour) return style;
@ -51,10 +51,10 @@ export function getPolygonTextStyleByPlacement(
const line = findNearestLine([x, y], lines);
const intersection = findNearestPointOnLine([x, y], line);
if (intersection && line) {
style.transform = `translate(${intersection[0] + offsetX}, ${intersection[1] + offsetY})`;
style.transform = [['translate', intersection[0] + offsetX, intersection[1] + offsetY]];
if (autoRotate) {
const angle = Math.atan((line[0][1] - line[1][1]) / (line[0][0] - line[1][0]));
style.transform += `rotate(${(angle / Math.PI) * 180}deg)`;
style.transform.push(['rotate', (angle / Math.PI) * 180]);
style.textAlign = 'center';
if (placement === 'right' || placement === 'left') {
if (angle > 0) {

27
packages/g6/src/utils/transform.ts
View File

@ -1,3 +1,5 @@
import type { TransformArray } from '@antv/g';
/**
* <zh/> 从 transform 字符串中替换 translate 部分
*
@ -8,7 +10,30 @@
* @param transform - <zh/> transform 字符串 | <en/> transform string
* @returns <zh/> 替换后的 transform 字符串 | <en/> replaced transform string
*/
export function replaceTranslateInTransform(x: number, y: number, z: number, transform?: string) {
export function replaceTranslateInTransform(
x: number,
y: number,
z: number,
transform: string | TransformArray,
): string | TransformArray {
if (Array.isArray(transform)) {
let hasTranslate = false;
const newTransform: TransformArray = transform.map((t) => {
if (t[0] === 'translate') {
hasTranslate = true;
return ['translate', x, y];
} else if (t[0] === 'translate3d') {
hasTranslate = true;
return ['translate3d', x, y, z];
}
return t;
});
if (!hasTranslate) {
newTransform.splice(0, 0, z === 0 ? ['translate', x, y] : ['translate3d', x, y, z]);
}
return newTransform;
}
const removedTranslate = transform ? transform.replace(/translate(3d)?\([^)]*\)/g, '') : '';
if (z === 0) {
return `translate(${x}, ${y})${removedTranslate}`;

2
packages/site/examples/element/custom-edge/demo/custom-arrow.js
View File

@ -28,7 +28,7 @@ const data = {
style: {
endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
endArrowSize: 28,
endArrowTransform: 'rotate(90deg)',
endArrowTransform: [['rotate', 90]],
},
},
],

2
packages/site/examples/element/custom-node/demo/g2-activity-chart.js
View File

@ -59,7 +59,7 @@ class ActivityChart extends Circle {
{
type: 'image',
encode: { x: 'name', y: 0, src: (d) => d.icon, size: 6 },
style: { transform: 'translateX(6)' },
style: { transform: [['translateX', 6]] },
},
],
},

13
packages/site/examples/layout/compact-box/demo/vertical.js
View File

@ -18,22 +18,25 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
data: treeToGraphData(data),
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
node: {
style: d => {
style: (d) => {
const style = {
labelText: d.id,
labelPlacement: 'right',
labelOffsetX: 2,
labelBackground: true,
ports: [{ placement: 'top' }, { placement: 'bottom' }],
}
};
if (isLeafNode(d)) {
Object.assign(style, {
labelTransform: 'rotate(90deg) translate(18px)',
labelTransform: [
['rotate', 90],
['translate', 18],
],
labelBaseline: 'center',
labelTextAlign: 'left',
})
});
}
return style
return style;
},
animation: {
enter: false,

2
packages/site/examples/layout/custom/demo/arc.js
View File

@ -64,7 +64,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5
labelText: (d) => d.name,
labelTextAlign: 'start',
labelTextBaseline: 'middle',
labelTransform: 'rotate(90)',
labelTransform: [['rotate', 90]],
},
},
edge: {

5
packages/site/examples/layout/dendrogram/demo/vertical.js
View File

@ -28,7 +28,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
};
if (isLeafNode(d)) {
Object.assign(style, {
labelTransform: 'rotate(90deg) translate(18px)',
labelTransform: [
['rotate', 90],
['translate', 18],
],
labelBaseline: 'center',
labelTextAlign: 'left',
});

2
packages/site/examples/scene-case/default/demo/fund-flow.js
View File

@ -108,7 +108,7 @@ class TreeNode extends Rect {
fontFamily: 'iconfont',
fontSize: 16,
text: '\ue62d',
transform: this.data.variableUp ? '' : 'rotate(180deg)',
transform: this.data.variableUp ? [] : [['rotate', 180]],
};
}

2
packages/site/examples/scene-case/default/demo/mindmap.js
View File

@ -107,7 +107,7 @@ class MindmapNode extends BaseNode {
fontSize: 8,
text: '\ue6e4',
textAlign: 'center',
transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
visibility: showIcon ? 'visible' : 'hidden',
x: direction === 'left' ? -6 : width + 6,
y: height,

10
packages/site/examples/scene-case/default/demo/organization-chart.js
View File

@ -29,14 +29,14 @@ class ChartNode extends Rect {
fontSize: 20,
fontWeight: 600,
textAlign: 'center',
transform: 'translate(0,0)',
transform: [['translate', 0, 0]],
}
: {
fill: '#2078B4',
fontSize: 14,
fontWeight: 400,
textAlign: 'left',
transform: 'translate(-65, -15)',
transform: [['translate', -65, -15]],
};
return { text, ...labelStyle };
}
@ -57,7 +57,7 @@ class ChartNode extends Rect {
textTransform: 'uppercase',
fill: '#343f4a',
textAlign: 'left',
transform: 'translate(-65, 0)',
transform: [['translate', -65, 0]],
};
}
@ -72,7 +72,7 @@ class ChartNode extends Rect {
text: this.data.status,
fontSize: 8,
textAlign: 'left',
transform: 'translate(40, -16)',
transform: [['translate', 40, -16]],
padding: [0, 4],
fill: '#fff',
backgroundFill: statusColors[this.data.status],
@ -91,7 +91,7 @@ class ChartNode extends Rect {
fontSize: 8,
fontWeight: 300,
textAlign: 'left',
transform: 'translate(-65, 20)',
transform: [['translate', -65, 20]],
};
}

6
packages/site/package.json
View File

@ -41,9 +41,9 @@
"@ant-design/icons": "^5.5.1",
"@antv/algorithm": "^0.1.26",
"@antv/dumi-theme-antv": "^0.5.2",
"@antv/g": "^6.0.14",
"@antv/g-svg": "^2.0.12",
"@antv/g-webgl": "^2.0.19",
"@antv/g": "^6.1.2",
"@antv/g-svg": "^2.0.15",
"@antv/g-webgl": "^2.0.22",
"@antv/g2": "^5.2.7",
"@antv/g6": "workspace:*",
"@antv/g6-extension-3d": "workspace:*",