Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/animation config update #489

Merged
merged 3 commits into from
Jun 27, 2024
Merged

Fix/animation config update #489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
985f69c
fix: fix animation config update
Jun 27, 2024
3f95e35
fix: wrap final animation attribute interface
Jun 27, 2024
a17ad17
chore: add change log
Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@visactor/vgrammar-core/fix-animation-config-update_2024-06-27-11-15.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vgrammar-core",
"comment": "fix: fix the animation config update",
"type": "none"
}
],
"packageName": "@visactor/vgrammar-core"
}
8 changes: 4 additions & 4 deletions packages/vgrammar-core/src/graph/animation/animation/fade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const fadeIn: TypeAnimation<IElement> = (
options: any,
animationParameters: IAnimationParameters
) => {
const finalAttrs = element.getFinalGraphicAttributes() ?? {};
const attrs = element.getFinalAnimationAttributes() ?? {};

return {
from: {
Expand All @@ -15,9 +15,9 @@ export const fadeIn: TypeAnimation<IElement> = (
strokeOpacity: 0
},
to: {
opacity: finalAttrs.opacity ?? 1,
fillOpacity: finalAttrs.fillOpacity ?? 1,
strokeOpacity: finalAttrs.strokeOpacity ?? 1
opacity: attrs.opacity ?? 1,
fillOpacity: attrs.fillOpacity ?? 1,
strokeOpacity: attrs.strokeOpacity ?? 1
}
};
};
Expand Down
92 changes: 46 additions & 46 deletions packages/vgrammar-core/src/graph/animation/animation/grow-cartesian.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export const growCenterIn: TypeAnimation<IElement> = (
) => {
switch (options?.direction) {
case 'x': {
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');

return {
from: isValid(width)
Expand All @@ -29,9 +29,9 @@ export const growCenterIn: TypeAnimation<IElement> = (
};
}
case 'y': {
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

return {
from: isValid(height)
Expand All @@ -50,12 +50,12 @@ export const growCenterIn: TypeAnimation<IElement> = (
}
case 'xy':
default: {
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');
const from: any = {};

if (isValid(width)) {
Expand Down Expand Up @@ -93,9 +93,9 @@ export const growCenterOut: TypeAnimation<IElement> = (
) => {
switch (options?.direction) {
case 'x': {
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');

return {
to: isValid(width)
Expand All @@ -112,9 +112,9 @@ export const growCenterOut: TypeAnimation<IElement> = (
};
}
case 'y': {
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

return {
to: isValid(height)
Expand All @@ -132,12 +132,12 @@ export const growCenterOut: TypeAnimation<IElement> = (
}
case 'xy':
default: {
const x = element.getFinalGraphicAttributes()?.x;
const y = element.getFinalGraphicAttributes()?.y;
const x1 = element.getFinalGraphicAttributes()?.x1;
const y1 = element.getFinalGraphicAttributes()?.y1;
const width = element.getFinalGraphicAttributes()?.width;
const height = element.getFinalGraphicAttributes()?.height;
const x = element.getFinalAnimationAttribute('x');
const y = element.getFinalAnimationAttribute('y');
const x1 = element.getFinalAnimationAttribute('x1');
const y1 = element.getFinalAnimationAttribute('y1');
const width = element.getFinalAnimationAttribute('width');
const height = element.getFinalAnimationAttribute('height');
const to: any = {};

if (isValid(width)) {
Expand Down Expand Up @@ -173,9 +173,9 @@ function growWidthInIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');

if (options && options.orient === 'negative') {
const computedX1 = isValid(width) ? Math.max(x, x + width) : Math.max(x, x1);
Expand All @@ -199,9 +199,9 @@ function growWidthInOverall(
animationParameters: IAnimationParameters
) {
// no need to handle the situation where x > x1
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');
let overallValue: number;
if (options && options.orient === 'negative') {
if (isNumber(options.overall)) {
Expand Down Expand Up @@ -237,9 +237,9 @@ function growWidthOutIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const x = element.getFinalGraphicAttributes()?.x;
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x = element.getFinalAnimationAttribute('x');
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');

if (options && options.orient === 'negative') {
const computedX1 = isValid(width) ? Math.max(x, x + width) : Math.max(x, x1);
Expand All @@ -260,8 +260,8 @@ function growWidthOutOverall(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const x1 = element.getFinalGraphicAttributes()?.x1;
const width = element.getFinalGraphicAttributes()?.width;
const x1 = element.getFinalAnimationAttribute('x1');
const width = element.getFinalAnimationAttribute('width');

let overallValue: number;
if (options && options.orient === 'negative') {
Expand Down Expand Up @@ -299,9 +299,9 @@ function growHeightInIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

if (options && options.orient === 'negative') {
const computedY1 = isValid(height) ? Math.max(y, y + height) : Math.max(y, y1);
Expand All @@ -323,9 +323,9 @@ function growHeightInOverall(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

let overallValue: number;
if (options && options.orient === 'negative') {
Expand Down Expand Up @@ -362,9 +362,9 @@ function growHeightOutIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const y = element.getFinalGraphicAttributes()?.y;
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y = element.getFinalAnimationAttribute('y');
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

if (options && options.orient === 'negative') {
const computedY1 = isValid(height) ? Math.max(y, y + height) : Math.max(y, y1);
Expand All @@ -385,8 +385,8 @@ function growHeightOutOverall(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const y1 = element.getFinalGraphicAttributes()?.y1;
const height = element.getFinalGraphicAttributes()?.height;
const y1 = element.getFinalAnimationAttribute('y1');
const height = element.getFinalAnimationAttribute('height');

let overallValue: number;
if (options && options.orient === 'negative') {
Expand Down
30 changes: 15 additions & 15 deletions packages/vgrammar-core/src/graph/animation/animation/grow-interval.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ function growIntervalInIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const finalAttrs = element.getFinalGraphicAttributes();
const attrs = element.getFinalAnimationAttributes();

if (options && options.direction === 'x') {
const x = finalAttrs?.x;
const x1 = finalAttrs?.x1;
const x = attrs?.x;
const x1 = attrs?.x1;
if (options.orient === 'negative') {
return {
from: { x: x1, x1: x1 },
Expand All @@ -25,8 +25,8 @@ function growIntervalInIndividual(
to: { x: x, y1: x1 }
};
}
const y = finalAttrs?.y;
const y1 = finalAttrs?.y1;
const y = attrs?.y;
const y1 = attrs?.y1;
if (options && options.orient === 'negative') {
return {
from: { y: y1, y1: y1 },
Expand All @@ -44,11 +44,11 @@ function growIntervalInOverall(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const finalAttrs = element.getFinalGraphicAttributes();
const attrs = element.getFinalAnimationAttributes();

if (options && options.direction === 'x') {
const x = finalAttrs?.x;
const x1 = finalAttrs?.x1;
const x = attrs?.x;
const x1 = attrs?.x1;
let overallValue: number;
if (options.orient === 'negative') {
if (isNumber(options.overall)) {
Expand All @@ -69,8 +69,8 @@ function growIntervalInOverall(
};
}

const y = finalAttrs?.y;
const y1 = finalAttrs?.y1;
const y = attrs?.y;
const y1 = attrs?.y1;
let overallValue: number;
if (options && options.orient === 'negative') {
if (isNumber(options.overall)) {
Expand Down Expand Up @@ -114,10 +114,10 @@ function growIntervalOutIndividual(
options: IGrowCartesianAnimationOptions,
animationParameters: IAnimationParameters
) {
const finalAttrs = element.getFinalGraphicAttributes();
const attrs = element.getFinalAnimationAttributes();
if (options && options.direction === 'x') {
const x = finalAttrs?.x;
const x1 = finalAttrs?.x1;
const x = attrs?.x;
const x1 = attrs?.x1;
const prevX = element.getGraphicAttribute('x', true);
const prevX1 = element.getGraphicAttribute('x1', true);
if (options.orient === 'negative') {
Expand All @@ -132,8 +132,8 @@ function growIntervalOutIndividual(
};
}

const y = finalAttrs?.y;
const y1 = finalAttrs?.y1;
const y = attrs?.y;
const y1 = attrs?.y1;
const prevY = element.getGraphicAttribute('y', true);
const prevY1 = element.getGraphicAttribute('y1', true);
if (options && options.orient === 'negative') {
Expand Down
Loading
Loading