Skip to content

Commit

Permalink
🎉 update font
Browse files Browse the repository at this point in the history
  • Loading branch information
songquanpeng committed Dec 14, 2022
1 parent c654d91 commit 8580907
Showing 1 changed file with 24 additions and 16 deletions.
40 changes: 24 additions & 16 deletions render/common.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
const getTheme = require('../common/theme.js');

function render(items, theme = 'light') {
const {titleColor, backgroundColor, labelColor, valueColor} = getTheme(theme);
const { titleColor, backgroundColor, labelColor, valueColor } =
getTheme(theme);
let textTags = '';
for (let i = 0; i < items.length; i++) {
items[i].id = `key_${i}`;
Expand All @@ -21,18 +22,18 @@ function render(items, theme = 'light') {
textTags += renderText(items[i]);
}

return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="382" height="210" viewBox="0 0 382 210">
return `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='382' height='210' viewBox='0 0 382 210'>
<defs>
<filter id="Card" x="0" y="0" width="382" height="210" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
<filter id='Card' x='0' y='0' width='382' height='210' filterUnits='userSpaceOnUse'>
<feOffset dy='3' input='SourceAlpha'/>
<feGaussianBlur stdDeviation='3' result='blur'/>
<feFlood flood-opacity='0.161'/>
<feComposite operator='in' in2='blur'/>
<feComposite in='SourceGraphic'/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Card)">
<rect id="Card-2" data-name="Card" width="364" height="192" rx="8" transform="translate(9 6)" fill="${backgroundColor}"/>
<g transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(#Card)'>
<rect id='Card-2' data-name='Card' width='364' height='192' rx='8' transform='translate(9 6)' fill='${backgroundColor}'/>
</g>
${textTags}
</svg>
Expand All @@ -43,23 +44,30 @@ function renderText(data) {
let weight = '';
if (data.type === 'title') {
weight = ` font-weight="700" `;
return `<text id="${data.id}" x="50%" y="${data.translate_y}" dominant-baseline="middle" text-anchor="middle" fill="${data.color}" font-size="${data.font_size}" font-family="${data.font}" ${weight}>${data.text}</text>`;
return `<text id='${data.id}' x='50%' y='${data.translate_y}' dominant-baseline='middle' text-anchor='middle' fill='${data.color}' font-size='${data.font_size}' font-family='${data.font}' ${weight}>${data.text}</text>`;
}
return `<text id="${data.id}" transform="translate(${data.translate_x} ${data.translate_y})" fill="${data.color}" font-size="${data.font_size}" font-family="${data.font}" ${weight}><tspan x="0" y="0">${data.text}</tspan></text>\n`;
return `<text id='${data.id}' transform='translate(${data.translate_x} ${data.translate_y})' fill='${data.color}' font-size='${data.font_size}' font-family='${data.font}' ${weight}><tspan x='0' y='0'>${data.text}</tspan></text>\n`;
}

function constructItem(translate_x, translate_y, text, type, font_size, color = '', font = 'SegoeUI, Segoe UI') {
function constructItem(
translate_x,
translate_y,
text,
type,
font_size,
color = '',
font = 'SegoeUI, Segoe UI, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei'
) {
return {
translate_x: translate_x,
translate_y: translate_y,
text: text,
type: type,
font_size: font_size,
color: color,
font: font
font: font,
};

}

exports.render = render;
exports.constructItem = constructItem;
exports.constructItem = constructItem;

0 comments on commit 8580907

Please sign in to comment.