Skip to content

Commit

Permalink
feat: shape增加step类型
Browse files Browse the repository at this point in the history
  • Loading branch information
xuying.xu committed Apr 10, 2024
1 parent f307f6d commit 93f4549
Show file tree
Hide file tree
Showing 7 changed files with 266 additions and 38 deletions.
34 changes: 32 additions & 2 deletions packages/f-engine/src/shape/smoothPolyline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Path } from '@antv/g-lite';
import { PathArray } from '@antv/util';
import * as Smooth from './util/smooth';


export class SmoothPolyline extends Path {
static tag = 'smooth-polyline';
parsedStyle: any;
Expand All @@ -13,13 +14,13 @@ export class SmoothPolyline extends Path {

setAttribute(name, value, force?: boolean) {
super.setAttribute(name, value, force);
if (['smooth', 'points'].indexOf(name) > -1) {
if (['smooth', 'points', 'step'].indexOf(name) > -1) {
this.updatePath();
}
}

private updatePath() {
const { smooth, points } = this.parsedStyle;
const { smooth, points, step } = this.parsedStyle;
const { points: pos } = points;

const d: PathArray = [['M', pos[0][0], pos[0][1]]];
Expand All @@ -44,6 +45,35 @@ export class SmoothPolyline extends Path {
const sp = sps[i];
d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
}
} else if (step) {
let i;
let l;
switch (step) {
case "start":
for (i = 1, l = pos.length; i < l; i++) {
const x = pos[i - 1][0]
d.push(['L', x, pos[i - 1][1]])
d.push(['L', x, pos[i][1]])
d.push(['L', pos[i][0], pos[i][1]]);
}
break;
case "middle":
for (i = 1, l = pos.length; i < l; i++) {
const x = (pos[i][0] + pos[i - 1][0]) / 2
d.push(['L', x, pos[i - 1][1]])
d.push(['L', x, pos[i][1]])
d.push(['L', pos[i][0], pos[i][1]]);
}
break;
case "end":
for (i = 1, l = pos.length; i < l; i++) {
const x = pos[i][0]
d.push(['L', x, pos[i - 1][1]])
d.push(['L', x, pos[i][1]])
d.push(['L', pos[i][0], pos[i][1]]);
}
break;
}
} else {
let i;
let l;
Expand Down
74 changes: 38 additions & 36 deletions packages/f-engine/src/types/shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type ArrayAttribute =
| [string | number, string | number, string | number]
| [string | number, string | number, string | number, string | number];

type StepType = 'start' | 'middle' | 'end'
interface StyleFlexProps {
display?: 'flex';
position?: 'relative' | 'absolute';
Expand Down Expand Up @@ -100,67 +101,68 @@ type omitStyleProps = 'display';

export interface GroupStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GGroupStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GGroupStyleProps, omitStyleProps> { }
export interface RectStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GRectStyleProps, omitStyleProps | 'width' | 'height' | 'radius'> {
StyleClipProps,
Omit<GRectStyleProps, omitStyleProps | 'width' | 'height' | 'radius'> {
radius?: ArrayAttribute;
}
export interface CircleStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GCircleStyleProps, omitStyleProps | 'r'> {
StyleClipProps,
Omit<GCircleStyleProps, omitStyleProps | 'r'> {
r?: string | number;
}
export interface LineStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GLineStyleProps, omitStyleProps | 'x1' | 'y1' | 'x2' | 'y2'> {
StyleClipProps,
Omit<GLineStyleProps, omitStyleProps | 'x1' | 'y1' | 'x2' | 'y2'> {
x1?: string | number;
y1?: string | number;
x2?: string | number;
y2?: string | number;
}
export interface PolygonStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GPolygonStyleProps, omitStyleProps | 'points'> {
StyleClipProps,
Omit<GPolygonStyleProps, omitStyleProps | 'points'> {
points: [number, number][] | [string, string][] | [number, string][] | [string, number][];
smooth?: boolean;
}
export interface PolylineStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GPolylineStyleProps, omitStyleProps | 'points'> {
StyleClipProps,
Omit<GPolylineStyleProps, omitStyleProps | 'points'> {
points: [number, number][] | [string, string][] | [number, string][] | [string, number][];
smooth?: boolean;
step?: StepType;
}
export interface ArcStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GArcStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GArcStyleProps, omitStyleProps> { }
export interface SectorStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GSectorStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GSectorStyleProps, omitStyleProps> { }
export interface TextStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GTextStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GTextStyleProps, omitStyleProps> { }
export interface ImageStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GImageStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GImageStyleProps, omitStyleProps> { }
export interface PathStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GPathStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GPathStyleProps, omitStyleProps> { }
export interface MarkerStyleProps
extends StyleFlexProps,
StyleClipProps,
Omit<GMarkerStyleProps, omitStyleProps> {}
StyleClipProps,
Omit<GMarkerStyleProps, omitStyleProps> { }

interface AnimationBase {
// 缓动函数
Expand Down Expand Up @@ -198,15 +200,15 @@ export interface ShapeElementProps<T> extends IProps {
animation?: AnimationProps;
}

export interface GroupShapeProps extends ShapeElementProps<GroupStyleProps> {}
export interface RectShapeProps extends ShapeElementProps<RectStyleProps> {}
export interface CircleShapeProps extends ShapeElementProps<CircleStyleProps> {}
export interface LineShapeProps extends ShapeElementProps<LineStyleProps> {}
export interface PolygonShapeProps extends ShapeElementProps<PolygonStyleProps> {}
export interface PolylineShapeProps extends ShapeElementProps<PolylineStyleProps> {}
export interface ArcShapeProps extends ShapeElementProps<ArcStyleProps> {}
export interface SectorShapeProps extends ShapeElementProps<SectorStyleProps> {}
export interface TextShapeProps extends ShapeElementProps<TextStyleProps> {}
export interface ImageShapeProps extends ShapeElementProps<ImageStyleProps> {}
export interface PathShapeProps extends ShapeElementProps<PathStyleProps> {}
export interface MarkerShapeProps extends ShapeElementProps<MarkerStyleProps> {}
export interface GroupShapeProps extends ShapeElementProps<GroupStyleProps> { }
export interface RectShapeProps extends ShapeElementProps<RectStyleProps> { }
export interface CircleShapeProps extends ShapeElementProps<CircleStyleProps> { }
export interface LineShapeProps extends ShapeElementProps<LineStyleProps> { }
export interface PolygonShapeProps extends ShapeElementProps<PolygonStyleProps> { }
export interface PolylineShapeProps extends ShapeElementProps<PolylineStyleProps> { }
export interface ArcShapeProps extends ShapeElementProps<ArcStyleProps> { }
export interface SectorShapeProps extends ShapeElementProps<SectorStyleProps> { }
export interface TextShapeProps extends ShapeElementProps<TextStyleProps> { }
export interface ImageShapeProps extends ShapeElementProps<ImageStyleProps> { }
export interface PathShapeProps extends ShapeElementProps<PathStyleProps> { }
export interface MarkerShapeProps extends ShapeElementProps<MarkerStyleProps> { }
Binary file added ...e/test/shape/__image_snapshots__/polyline-test-tsx-polyline-polyline-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ape/__image_snapshots__/polyline-test-tsx-polyline-step-end-polyline-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../__image_snapshots__/polyline-test-tsx-polyline-step-middle-polyline-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e/__image_snapshots__/polyline-test-tsx-polyline-step-start-polyline-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
196 changes: 196 additions & 0 deletions packages/f-engine/test/shape/polyline.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import { jsx, Canvas, Component, createRef } from '../../src';
import { createContext, delay } from '../util';
const context = createContext();
import { Renderer } from '@antv/g-mobile-canvas';


describe('polyline', () => {
it('polyline', async () => {
const renderer = new Renderer();
const context = createContext('polyline');

const { props } = (
<Canvas renderer={renderer} context={context}>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'blue'
}}
animation={{
update: {
easing: 'linear',
duration: 100,
property: ['points'],
},
}}
/>
</Canvas>
);
const canvas = new Canvas(props);
await canvas.render();
await delay(500);
expect(context).toMatchImageSnapshot();
})
it('step start polyline', async () => {
const renderer = new Renderer();
const context = createContext('step start polyline');

const { props } = (
<Canvas renderer={renderer} context={context}>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'blue'
}}
animation={{
update: {
easing: 'linear',
duration: 100,
property: ['points'],
},
}}
/>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'red',
step: 'start',
}}
animation={{
update: {
easing: 'linear',
duration: 200,
property: ['points'],
},
}}
/>
</Canvas>
);
const canvas = new Canvas(props);
await canvas.render();
await delay(500);
expect(context).toMatchImageSnapshot();
})
it('step middle polyline', async () => {
const renderer = new Renderer();
const context = createContext('step middle polyline');

const { props } = (
<Canvas renderer={renderer} context={context}>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'blue'
}}
animation={{
update: {
easing: 'linear',
duration: 100,
property: ['points'],
},
}}
/>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'red',
step: 'middle',
}}
animation={{
update: {
easing: 'linear',
duration: 200,
property: ['points'],
},
}}
/>
</Canvas>
);
const canvas = new Canvas(props);
await canvas.render();
await delay(500);
expect(context).toMatchImageSnapshot();
})
it('step end polyline', async () => {
const renderer = new Renderer();
const context = createContext('step end polyline');

const { props } = (
<Canvas renderer={renderer} context={context}>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'blue'
}}
animation={{
update: {
easing: 'linear',
duration: 100,
property: ['points'],
},
}}
/>
<polyline
style={{
points: [
[0, 10],
[20, 80],
[40, 40],
[60, 10],
[80, 60]
],
stroke: 'red',
step: 'end'
}}
animation={{
update: {
easing: 'linear',
duration: 200,
property: ['points'],
},
}}
/>
</Canvas>
);
const canvas = new Canvas(props);
await canvas.render();
await delay(500);
expect(context).toMatchImageSnapshot();
})
});

0 comments on commit 93f4549

Please sign in to comment.