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

Jump to bottom

fix: fix the bug in multiple theme, closed #17 #44

Merged
merged 2 commits into from
Jun 15, 2023
Merged

fix: fix the bug in multiple theme, closed #17 #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28524e8
fix: fix the bug in multiple theme, closed #17
neuqzxy Jun 15, 2023
c43c1f1
Merge branch 'main' into fix/theme
neuqzxy Jun 15, 2023
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
112 changes: 46 additions & 66 deletions docs/demos/src/pages/circle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,35 @@
import { createStage, createCircle, IGraphic } from '@visactor/vrender';
import { colorPools } from '../utils';
import { createGroup } from '@visactor/vrender';

export const page = () => {
const graphics: IGraphic[] = [];
graphics.push(createCircle({
radius: 50,
x: 100,
y: 200,
fill: colorPools[10],
lineWidth: 2,
}));
// graphics.push(createCircle({
// radius: 50,
// x: 100,
// y: 200,
// fill: colorPools[10],
// lineWidth: 2,
// }));

graphics.push(createCircle({
radius: 50,
x: 300,
y: 200,
lineWidth: 2,
background:
'<svg t="1683876749384" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5625" width="200" height="200"><path d="M928.662069 17.655172h-812.137931v208.331035h812.137931z" fill="#F1543F" p-id="5626"></path><path d="M1020.468966 275.42069l-236.579311 367.227586c0-17.655172-3.531034-35.310345-14.124138-49.434483-17.655172-24.717241-56.496552-28.248276-81.213793-45.903448-21.186207-14.124138-35.310345-42.372414-60.027586-56.496552L928.662069 17.655172l24.717241 14.124138c88.275862 49.434483 116.524138 158.896552 67.089656 243.64138M416.662069 490.813793c-21.186207 14.124138-38.841379 42.372414-60.027586 56.496552-24.717241 17.655172-63.558621 24.717241-81.213793 45.903448-10.593103 14.124138-10.593103 31.77931-14.124138 49.434483L24.717241 275.42069C-24.717241 190.675862 3.531034 81.213793 91.806897 31.77931l24.717241-14.124138 300.137931 473.158621z" fill="#FF7058" p-id="5627"></path><path d="M893.351724 656.772414c0 38.841379-35.310345 70.62069-45.903448 102.4-10.593103 35.310345-3.531034 81.213793-24.717242 109.462069-21.186207 28.248276-67.089655 35.310345-98.868965 56.496551-31.77931 28.248276-52.965517 70.62069-88.275862 81.213794-35.310345 10.593103-77.682759-10.593103-112.993104-10.593104-38.841379 0-81.213793 21.186207-116.524137 10.593104S349.572414 953.37931 317.793103 932.193103c-31.77931-21.186207-77.682759-28.248276-98.868965-56.496551-21.186207-28.248276-14.124138-74.151724-24.717241-109.462069-10.593103-35.310345-45.903448-67.089655-45.903449-102.4 0-38.841379 35.310345-70.62069 45.903449-105.931035 10.593103-35.310345 3.531034-81.213793 24.717241-109.462069 21.186207-28.248276 67.089655-35.310345 98.868965-56.496551 28.248276-21.186207 49.434483-63.558621 88.275863-74.151725 35.310345-10.593103 77.682759 10.593103 116.524137 10.593104 38.841379 0 81.213793-21.186207 112.993104-10.593104 35.310345 10.593103 56.496552 52.965517 88.275862 74.151725 31.77931 21.186207 77.682759 28.248276 98.868965 56.496551 21.186207 28.248276 14.124138 74.151724 24.717242 109.462069 10.593103 31.77931 45.903448 63.558621 45.903448 98.868966" fill="#F8B64C" p-id="5628"></path><path d="M790.951724 656.772414c0 144.772414-120.055172 264.827586-268.358621 264.827586-148.303448 0-268.358621-120.055172-268.35862-264.827586s120.055172-264.827586 268.35862-264.827586c148.303448 0 268.358621 120.055172 268.358621 264.827586" fill="#FFD15C" p-id="5629"></path><path d="M706.206897 589.682759h-123.586207c-7.062069 0-10.593103-3.531034-14.124138-10.593104L529.655172 466.096552c-3.531034-14.124138-21.186207-14.124138-28.248275 0l-38.84138 112.993103c-3.531034 7.062069-7.062069 10.593103-14.124138 10.593104H335.448276c-14.124138 0-21.186207 17.655172-7.062069 24.717241l98.868965 70.62069c3.531034 3.531034 7.062069 10.593103 3.531035 14.124138L391.944828 812.137931c-3.531034 14.124138 10.593103 24.717241 21.186206 14.124138l98.868966-70.62069c3.531034-3.531034 10.593103-3.531034 17.655172 0l98.868966 70.62069c10.593103 7.062069 24.717241-3.531034 21.186207-14.124138l-38.841379-112.993103c-3.531034-7.062069 0-10.593103 3.531034-14.124138l98.868966-70.62069c14.124138-7.062069 7.062069-24.717241-7.062069-24.717241" fill="#F8B64C" p-id="5630"></path></svg>',
texture: 'circle',
textureColor: 'orange',
stroke: 'green',
}));

const stage = createStage({
canvas: 'main',
autoRender: true
});
const c1 = {
gradient: 'radial',
x0: 0.5,
y0: 0,
r0: 0,
x1: 0.5,
y1: 1,
r1: 0.7,
stops: [
{
offset: 0,
color: 'rgba(255,255,255,0.5)'
},
{
offset: 1,
color: '#6690F2'
}
]
}
const c2 = {
gradient: 'radial',
x0: 0.5,
y0: 0,
r0: 0,
x1: 0.5,
y1: 1,
r1: 0.7,
stops: [
{
offset: 0,
color: 'rgba(255,255,255,0.5)'
},
{
offset: 1,
color: '#FFDC83'
}
]
}
// graphics.push(createCircle({
// radius: 50,
// x: 300,
// y: 200,
// lineWidth: 2,
// background:
// '<svg t="1683876749384" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5625" width="200" height="200"><path d="M928.662069 17.655172h-812.137931v208.331035h812.137931z" fill="#F1543F" p-id="5626"></path><path d="M1020.468966 275.42069l-236.579311 367.227586c0-17.655172-3.531034-35.310345-14.124138-49.434483-17.655172-24.717241-56.496552-28.248276-81.213793-45.903448-21.186207-14.124138-35.310345-42.372414-60.027586-56.496552L928.662069 17.655172l24.717241 14.124138c88.275862 49.434483 116.524138 158.896552 67.089656 243.64138M416.662069 490.813793c-21.186207 14.124138-38.841379 42.372414-60.027586 56.496552-24.717241 17.655172-63.558621 24.717241-81.213793 45.903448-10.593103 14.124138-10.593103 31.77931-14.124138 49.434483L24.717241 275.42069C-24.717241 190.675862 3.531034 81.213793 91.806897 31.77931l24.717241-14.124138 300.137931 473.158621z" fill="#FF7058" p-id="5627"></path><path d="M893.351724 656.772414c0 38.841379-35.310345 70.62069-45.903448 102.4-10.593103 35.310345-3.531034 81.213793-24.717242 109.462069-21.186207 28.248276-67.089655 35.310345-98.868965 56.496551-31.77931 28.248276-52.965517 70.62069-88.275862 81.213794-35.310345 10.593103-77.682759-10.593103-112.993104-10.593104-38.841379 0-81.213793 21.186207-116.524137 10.593104S349.572414 953.37931 317.793103 932.193103c-31.77931-21.186207-77.682759-28.248276-98.868965-56.496551-21.186207-28.248276-14.124138-74.151724-24.717241-109.462069-10.593103-35.310345-45.903448-67.089655-45.903449-102.4 0-38.841379 35.310345-70.62069 45.903449-105.931035 10.593103-35.310345 3.531034-81.213793 24.717241-109.462069 21.186207-28.248276 67.089655-35.310345 98.868965-56.496551 28.248276-21.186207 49.434483-63.558621 88.275863-74.151725 35.310345-10.593103 77.682759 10.593103 116.524137 10.593104 38.841379 0 81.213793-21.186207 112.993104-10.593104 35.310345 10.593103 56.496552 52.965517 88.275862 74.151725 31.77931 21.186207 77.682759 28.248276 98.868965 56.496551 21.186207 28.248276 14.124138 74.151724 24.717242 109.462069 10.593103 31.77931 45.903448 63.558621 45.903448 98.868966" fill="#F8B64C" p-id="5628"></path><path d="M790.951724 656.772414c0 144.772414-120.055172 264.827586-268.358621 264.827586-148.303448 0-268.358621-120.055172-268.35862-264.827586s120.055172-264.827586 268.35862-264.827586c148.303448 0 268.358621 120.055172 268.358621 264.827586" fill="#FFD15C" p-id="5629"></path><path d="M706.206897 589.682759h-123.586207c-7.062069 0-10.593103-3.531034-14.124138-10.593104L529.655172 466.096552c-3.531034-14.124138-21.186207-14.124138-28.248275 0l-38.84138 112.993103c-3.531034 7.062069-7.062069 10.593103-14.124138 10.593104H335.448276c-14.124138 0-21.186207 17.655172-7.062069 24.717241l98.868965 70.62069c3.531034 3.531034 7.062069 10.593103 3.531035 14.124138L391.944828 812.137931c-3.531034 14.124138 10.593103 24.717241 21.186206 14.124138l98.868966-70.62069c3.531034-3.531034 10.593103-3.531034 17.655172 0l98.868966 70.62069c10.593103 7.062069 24.717241-3.531034 21.186207-14.124138l-38.841379-112.993103c-3.531034-7.062069 0-10.593103 3.531034-14.124138l98.868966-70.62069c14.124138-7.062069 7.062069-24.717241-7.062069-24.717241" fill="#F8B64C" p-id="5630"></path></svg>',
// texture: 'circle',
// textureColor: 'orange',
// stroke: 'green',
// }));

const circle = createCircle({
radius: 50,
x: 500,
y: 200,
fill: 'red',
fill: colorPools[10],
// lineWidth: 2,
outerBorder: {
distance: 10,
lineWidth: 6,
Expand All @@ -85,12 +44,33 @@ export const page = () => {
textureColor: 'orange',
stroke: 'red',
});
graphics.push(circle);

const group = createGroup();
group.add(circle);

group.setTheme({
common: {
fill: 'green'
}
})

graphics.push(group);

circle.animate().to({ fill: c2 }, 2000, 'linear');
console.log(stage)

const stage = createStage({
canvas: 'main',
autoRender: true
});

stage.setTheme({
common: {
lineWidth: 6
}
})

graphics.forEach(g => {
stage.defaultLayer.add(g);
})
});

console.log(stage)
};
47 changes: 36 additions & 11 deletions packages/vrender/src/graphic/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { clone } from '@visactor/vutils';
import { IGraphicAttribute, IFullThemeSpec, IGraphic, IGroup, ITheme, IThemeSpec } from '../interface';
import {
DefaultArcAttribute,
Expand Down Expand Up @@ -58,17 +59,34 @@ export function newThemeObj(): IFullThemeSpec {
}

// 将t合并到out中
function combineTheme(out: IThemeSpec, t: IThemeSpec) {
function combineTheme(out: IThemeSpec, t: IThemeSpec, rewrite: boolean = true) {
if (!t) {
return;
}
Object.keys(t).forEach(k => {
if (out[k]) {
Object.assign(out[k], t[k]);
} else {
out[k] = t[k];
}
});
if (rewrite) {
Object.keys(t).forEach(k => {
if (out[k]) {
Object.assign(out[k], t[k]);
} else {
out[k] = t[k];
}
});
} else {
Object.keys(t).forEach(k => {
if (out[k]) {
// Object.assign(out[k], t[k]);
const outItem = out[k];
const tItem = t[k];
Object.keys(t[k]).forEach(kItem => {
if (outItem[kItem] === undefined) {
outItem[kItem] = tItem[kItem];
}
});
} else {
out[k] = t[k];
}
});
}
}

// 全局创建60个theme，节省打点耗时时间
Expand Down Expand Up @@ -138,13 +156,20 @@ export class Theme implements ITheme {
}

// 应用主题，从根节点一直触发到当前节点（如果上层节点需要的话）
applyTheme(group: IGroup, pt: IThemeSpec): IThemeSpec {
applyTheme(group: IGroup, pt: IThemeSpec, force: boolean = false): IThemeSpec {
if (this.dirty) {
const parentGroup = this.getParentWithTheme(group);
if (parentGroup) {
const parentTheme = parentGroup.theme;
if (parentTheme.dirty) {
parentTheme.applyTheme(parentGroup, pt);
if (parentTheme.dirty || force) {
// 强制apply所有的上层
parentTheme.applyTheme(parentGroup, pt, true);
}
// 将parentTheme.userTheme设置给自己的userTheme
if (!this.userTheme) {
this.userTheme = clone(parentTheme.userTheme);
} else {
combineTheme(this.userTheme, parentTheme.userTheme, false);
}
combineTheme(pt, parentTheme.userTheme);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vrender/src/interface/graphic/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export interface ITheme {
combinedTheme?: IFullThemeSpec;
userTheme?: IThemeSpec;
nextTheme?: IThemeSpec;
applyTheme: (group: IGroup, pt: IThemeSpec) => IThemeSpec;
applyTheme: (group: IGroup, pt: IThemeSpec, force?: boolean) => IThemeSpec;
setTheme: (t: IThemeSpec, g: IGroup) => void;
dirty: boolean;
}