johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

add scale tag

Browse source 
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
Puniko 2023-05-21 17:16:22 +02:00 committed by Johann150
parent a16e921ffc
commit 11121bbb4c
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
2 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
packages/client/src/components/mfm.ts
View file

@ -37,6 +37,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
rootScale: {
type: Number,
default: 1
}
}, },
render() { render() {
@ -50,7 +54,7 @@ export default defineComponent({
return t.match(/^[0-9.]+s$/) ? t : null; return t.match(/^[0-9.]+s$/) ? t : null;
}; };
const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | VNode[] => { const genEl = (ast: mfm.MfmNode[], scale: Number) => ast.map((token): VNode | VNode[] => {
switch (token.type) { switch (token.type) {
case 'text': { case 'text': {
const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n'); const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
@ -69,17 +73,17 @@ export default defineComponent({
} }
case 'bold': { case 'bold': {
return h('b', genEl(token.children)); return h('b', genEl(token.children, scale));
} }
case 'strike': { case 'strike': {
return h('del', genEl(token.children)); return h('del', genEl(token.children, scale));
} }
case 'italic': { case 'italic': {
return h('i', { return h('i', {
style: 'font-style: oblique;', style: 'font-style: oblique;',
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'fn': { case 'fn': {
@ -139,18 +143,18 @@ export default defineComponent({
} }
case 'x2': { case 'x2': {
return h('span', { return h('span', {
class: 'mfm-x2', class: 'mfm-x2'
}, genEl(token.children)); }, genEl(token.children, scale * 2));
} }
case 'x3': { case 'x3': {
return h('span', { return h('span', {
class: 'mfm-x3', class: 'mfm-x3'
}, genEl(token.children)); }, genEl(token.children, scale * 3));
} }
case 'x4': { case 'x4': {
return h('span', { return h('span', {
class: 'mfm-x4', class: 'mfm-x4'
}, genEl(token.children)); }, genEl(token.children, scale * 4));
} }
case 'font': { case 'font': {
const family = const family =
@ -167,7 +171,7 @@ export default defineComponent({
case 'blur': { case 'blur': {
return h('span', { return h('span', {
class: '_mfm_blur_', class: '_mfm_blur_',
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'rainbow': { case 'rainbow': {
const speed = validTime(token.props.args.speed) || '1s'; const speed = validTime(token.props.args.speed) || '1s';
@ -176,9 +180,9 @@ export default defineComponent({
} }
case 'sparkle': { case 'sparkle': {
if (!this.$store.state.animatedMfm) { if (!this.$store.state.animatedMfm) {
return genEl(token.children); return genEl(token.children, scale);
} }
return h(MkSparkle, {}, genEl(token.children)); return h(MkSparkle, {}, genEl(token.children, scale));
} }
case 'rotate': { case 'rotate': {
const degrees = (typeof token.props.args.deg === 'string' ? parseInt(token.props.args.deg) : null) || '90'; const degrees = (typeof token.props.args.deg === 'string' ? parseInt(token.props.args.deg) : null) || '90';
@ -191,26 +195,33 @@ export default defineComponent({
style = `transform: translateX(${x}em) translateY(${y}em);`; style = `transform: translateX(${x}em) translateY(${y}em);`;
break; break;
} }
case 'scale': {
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
style = `transform: scale(${x}, ${y});`;
scale = scale * Math.max(x, y);
break;
}
} }
if (style == null) { if (style == null) {
return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']); return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);
} else { } else {
return h('span', { return h('span', {
style: 'display: inline-block;' + style, style: 'display: inline-block;' + style,
}, genEl(token.children)); }, genEl(token.children, scale));
} }
} }
case 'small': { case 'small': {
return h('small', { return h('small', {
class: '_mfm_small_' class: '_mfm_small_'
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'center': { case 'center': {
return h('div', { return h('div', {
style: 'text-align:center;', style: 'text-align:center;',
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'url': { case 'url': {
@ -226,7 +237,7 @@ export default defineComponent({
key: Math.random(), key: Math.random(),
url: token.props.url, url: token.props.url,
rel: 'nofollow noopener', rel: 'nofollow noopener',
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'mention': { case 'mention': {
@ -264,7 +275,7 @@ export default defineComponent({
case 'quote': { case 'quote': {
return h(this.nowrap ? 'span' : 'div', { return h(this.nowrap ? 'span' : 'div', {
class: 'quote', class: 'quote',
}, genEl(token.children)); }, genEl(token.children, scale));
} }
case 'emojiCode': { case 'emojiCode': {
@ -317,6 +328,6 @@ export default defineComponent({
}).flat(); }).flat();
// Parse ast to DOM // Parse ast to DOM
return h('span', genEl(ast)); return h('span', genEl(ast, this.rootScale ?? 1));
}, },
}); });

2
packages/client/src/scripts/mfm-tags.ts
View file

@ -1 +1 @@
export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'position']; export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'position', 'scale'];