refactor(renderer): apply styles created by editor (#153)

Author: Aarebecca

src/renderer/composites/icon.ts

@@ -14,8 +14,10 @@ export function renderItemIcon(
   const value = datum.icon;
   if (!value) return null;
   const { themeConfig } = options;
+  const dataAttrs = datum.attributes?.icon as Record<string, any> | undefined;
   const attrs: DynamicAttributes<IconAttributes> = {
     ...themeConfig.item?.icon,
+    ...dataAttrs,
   };
 
   const parsedAttrs = parseDynamicAttributes(node, attrs);

src/renderer/composites/illus.ts

@@ -11,21 +11,28 @@ import {
   getAttributes,
   getOrCreateDefs,
   removeAttributes,
+  setAttributes,
   uuid,
 } from '../../utils';
 import { ElementTypeEnum } from '../constants';
 
+type IllusRenderAttributes = IllusAttributes & Record<string, any>;
+
 export function renderIllus(
   svg: SVGSVGElement,
   node: SVGElement,
   value: string | ResourceConfig | undefined,
   datum?: ItemDatum,
+  attrs: Record<string, any> = {},
 ): IllusElement | null {
   if (!value) return null;
   const config = parseResourceConfig(value);
   if (!config) return null;
 
   const id = getResourceId(config)!;
+  if (attrs && Object.keys(attrs).length > 0) {
+    setAttributes(node, attrs);
+  }
   const clipPathId = createClipPath(svg, node, id);
 
   loadResource(svg, 'illus', config, datum);
@@ -35,8 +42,9 @@ export function renderIllus(
     id,
     {
       ...parseIllusBounds(node),
-      'clip-path': `url(#${clipPathId})`,
       ...(color ? { color } : {}),
+      ...attrs,
+      'clip-path': `url(#${clipPathId})`,
     },
     data,
   );
@@ -48,7 +56,8 @@ export function renderItemIllus(
   datum: ItemDatum,
 ) {
   const value = datum.illus;
-  return renderIllus(svg, node, value, datum);
+  const attrs = datum.attributes?.illus as Record<string, any> | undefined;
+  return renderIllus(svg, node, value, datum, attrs);
 }
 
 function createClipPath(
@@ -79,7 +88,11 @@ function createClipPath(
   return clipPathId;
 }
 
-function createIllusElement(id: string, attrs: IllusAttributes, value: string) {
+function createIllusElement(
+  id: string,
+  attrs: IllusRenderAttributes,
+  value: string,
+) {
   const { 'clip-path': clipPath, ...restAttrs } = attrs;
 
   const { x = '0', y = '0', width = '0', height = '0' } = restAttrs;

src/renderer/composites/text.ts

@@ -1,7 +1,7 @@
 import { get, kebabCase } from 'lodash-es';
 import { ParsedInfographicOptions } from '../../options';
 import type { DynamicAttributes } from '../../themes';
-import type { TextAttributes } from '../../types';
+import type { ItemDatum, TextAttributes } from '../../types';
 import {
   createTextElement,
   encodeFontFamily,
@@ -47,11 +47,16 @@ export function renderItemText(
   if (!textShape) return null;
   const { data, themeConfig } = options;
   const indexes = getItemIndexes(node.dataset.indexes || '0');
-  const text = String(get(getDatumByIndexes(data, indexes), type, ''));
+  const datum = getDatumByIndexes(data, indexes) as ItemDatum | undefined;
+  const text = String(get(datum, type, ''));
+  const dataAttrs = datum?.attributes?.[type] as
+    | Record<string, any>
+    | undefined;
   const attrs = Object.assign(
     {},
     themeConfig.base?.text,
     themeConfig.item?.[type],
+    dataAttrs,
   );
 
   const staticAttrs = parseDynamicAttributes(textShape, attrs);

src/renderer/renderer.ts

@@ -121,20 +121,36 @@ function fill(svg: SVGSVGElement, options: ParsedInfographicOptions) {
       const modified = renderText(
         element,
         data.title || '',
-        Object.assign({}, themeConfig.base?.text, themeConfig.title),
+        Object.assign(
+          {},
+          themeConfig.base?.text,
+          themeConfig.title,
+          data.attributes?.title,
+        ),
       );
       return upsert(element, modified);
     }
     if (isDesc(element)) {
       const modified = renderText(
         element,
         data.desc || '',
-        Object.assign({}, themeConfig.base?.text, themeConfig.desc),
+        Object.assign(
+          {},
+          themeConfig.base?.text,
+          themeConfig.desc,
+          data.attributes?.desc,
+        ),
       );
       return upsert(element, modified);
     }
     if (isIllus(element)) {
-      const modified = renderIllus(svg, element, data.illus?.[id]);
+      const modified = renderIllus(
+        svg,
+        element,
+        data.illus?.[id],
+        undefined,
+        data.attributes?.illus as Record<string, any> | undefined,
+      );
       return upsert(element, modified);
     }