puniko/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,
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));
},
});

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'];