From 11121bbb4caf447c79cd774684b947b8b12768d1 Mon Sep 17 00:00:00 2001 From: Puniko Date: Sun, 21 May 2023 17:16:22 +0200 Subject: [PATCH] add scale tag Co-authored-by: syuilo Co-authored-by: tamaina --- packages/client/src/components/mfm.ts | 51 +++++++++++++++---------- packages/client/src/scripts/mfm-tags.ts | 2 +- 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index 58e8571f4..75f1db07d 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -37,6 +37,10 @@ export default defineComponent({ type: Boolean, default: true, }, + rootScale: { + type: Number, + default: 1 + } }, render() { @@ -50,7 +54,7 @@ export default defineComponent({ 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) { case 'text': { const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n'); @@ -69,17 +73,17 @@ export default defineComponent({ } case 'bold': { - return h('b', genEl(token.children)); + return h('b', genEl(token.children, scale)); } case 'strike': { - return h('del', genEl(token.children)); + return h('del', genEl(token.children, scale)); } case 'italic': { return h('i', { style: 'font-style: oblique;', - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'fn': { @@ -139,18 +143,18 @@ export default defineComponent({ } case 'x2': { return h('span', { - class: 'mfm-x2', - }, genEl(token.children)); + class: 'mfm-x2' + }, genEl(token.children, scale * 2)); } case 'x3': { return h('span', { - class: 'mfm-x3', - }, genEl(token.children)); + class: 'mfm-x3' + }, genEl(token.children, scale * 3)); } case 'x4': { return h('span', { - class: 'mfm-x4', - }, genEl(token.children)); + class: 'mfm-x4' + }, genEl(token.children, scale * 4)); } case 'font': { const family = @@ -167,7 +171,7 @@ export default defineComponent({ case 'blur': { return h('span', { class: '_mfm_blur_', - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'rainbow': { const speed = validTime(token.props.args.speed) || '1s'; @@ -176,9 +180,9 @@ export default defineComponent({ } case 'sparkle': { 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': { 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);`; 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) { - return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']); + return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']); } else { return h('span', { style: 'display: inline-block;' + style, - }, genEl(token.children)); + }, genEl(token.children, scale)); } } case 'small': { return h('small', { class: '_mfm_small_' - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'center': { return h('div', { style: 'text-align:center;', - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'url': { @@ -226,7 +237,7 @@ export default defineComponent({ key: Math.random(), url: token.props.url, rel: 'nofollow noopener', - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'mention': { @@ -264,7 +275,7 @@ export default defineComponent({ case 'quote': { return h(this.nowrap ? 'span' : 'div', { class: 'quote', - }, genEl(token.children)); + }, genEl(token.children, scale)); } case 'emojiCode': { @@ -317,6 +328,6 @@ export default defineComponent({ }).flat(); // Parse ast to DOM - return h('span', genEl(ast)); + return h('span', genEl(ast, this.rootScale ?? 1)); }, }); diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts index 7f721361e..73de7b3be 100644 --- a/packages/client/src/scripts/mfm-tags.ts +++ b/packages/client/src/scripts/mfm-tags.ts @@ -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'];