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

VisActor · Jun 15, 2023 · 78d2f05 · 78d2f05
1 parent b3229cb
commit 78d2f05
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 34 deletions.
diff --git a/docs/demos/src/pages/circle.ts b/docs/demos/src/pages/circle.ts
@@ -1,34 +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',
-  }));
+  // 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',
+  // }));
 
-  graphics.push(createCircle({
+  const circle = createCircle({
     radius: 50,
     x: 500,
     y: 200,
     fill: colorPools[10],
-    lineWidth: 2,
+    // lineWidth: 2,
     outerBorder: {
       distance: 10,
       lineWidth: 6,
@@ -42,14 +43,34 @@ export const page = () => {
     texture: 'circle',
     textureColor: 'orange',
     stroke: 'red',
-  }));
+  });
+
+  const group = createGroup();
+  group.add(circle);
+
+  group.setTheme({
+    common: {
+      fill: 'green'
+    }
+  })
+
+  graphics.push(group);
+
 
   const stage = createStage({
     canvas: 'main',
     autoRender: true
   });
 
+  stage.setTheme({
+    common: {
+      lineWidth: 6
+    }
+  })
+
   graphics.forEach(g => {
     stage.defaultLayer.add(g);
-  })
+  });
+
+  console.log(stage)
 };
diff --git a/packages/vrender/src/graphic/theme.ts b/packages/vrender/src/graphic/theme.ts
@@ -1,3 +1,4 @@
+import { clone } from '@visactor/vutils';
 import { IGraphicAttribute, IFullThemeSpec, IGraphic, IGroup, ITheme, IThemeSpec } from '../interface';
 import {
   DefaultArcAttribute,
@@ -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，节省打点耗时时间
@@ -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);
       }

diff --git a/packages/vrender/src/interface/graphic/theme.ts b/packages/vrender/src/interface/graphic/theme.ts
@@ -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;
 }