natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add ability to crop content

This commit is contained in:
Isabell 2023-05-28 15:19:57 +10:00
parent 9b0b8a4180
commit e208a96e31
5 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/de-DE.yml
View File

@ -1178,6 +1178,8 @@ _mfm:
background: Hintergrundfarbe background: Hintergrundfarbe
positionDescription: Inhalt um einen bestimmten Betrag verschieben. positionDescription: Inhalt um einen bestimmten Betrag verschieben.
position: Position position: Position
cropDescription: Inhalt zuschneiden.
crop: Zuschneiden
scale: Maßstab scale: Maßstab
scaleDescription: Skaliere den Inhalt um einen bestimmten Betrag. scaleDescription: Skaliere den Inhalt um einen bestimmten Betrag.
foregroundDescription: Ändern der Vordergrundfarbe von Text. foregroundDescription: Ändern der Vordergrundfarbe von Text.

2
locales/en-US.yml
View File

@ -1270,6 +1270,8 @@ _mfm:
fadeDescription: "Fades content in and out." fadeDescription: "Fades content in and out."
position: "Position" position: "Position"
positionDescription: "Move content by a specified amount." positionDescription: "Move content by a specified amount."
crop: "Crop"
cropDescription: "Crop content."
scale: "Scale" scale: "Scale"
scaleDescription: "Scale content by a specified amount." scaleDescription: "Scale content by a specified amount."
foreground: "Foreground color" foreground: "Foreground color"

8
packages/client/src/components/mfm.ts
View File

@ -243,6 +243,14 @@ export default defineComponent({
style = `transform: translateX(${x}em) translateY(${y}em);`; style = `transform: translateX(${x}em) translateY(${y}em);`;
break; break;
} }
case "crop": {
const top = parseFloat(token.props.args.top ?? "0%");
const right = parseFloat(token.props.args.right ?? "0%");
const bottom = parseFloat(token.props.args.bottom ?? "0%");
const left = parseFloat(token.props.args.left ?? "0%");
style = `clip-path: inset(${top} ${right} ${bottom} ${left});`;
break;
}
case "scale": { case "scale": {
const x = Math.min(parseFloat(token.props.args.x ?? "1"), 5); const x = Math.min(parseFloat(token.props.args.x ?? "1"), 5);
const y = Math.min(parseFloat(token.props.args.y ?? "1"), 5); const y = Math.min(parseFloat(token.props.args.y ?? "1"), 5);

15
packages/client/src/pages/mfm-cheat-sheet.vue
View File

@ -365,6 +365,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block">
<div class="title">{{ i18n.ts._mfm.crop }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.cropDescription }}</p>
<div class="preview">
<Mfm :text="preview_crop" />
<MkTextarea v-model="preview_crop"
><span>MFM</span></MkTextarea
>
</div>
</div>
</div>
<div class="section _block"> <div class="section _block">
<div class="title">{{ i18n.ts._mfm.position }}</div> <div class="title">{{ i18n.ts._mfm.position }}</div>
<div class="content"> <div class="content">
@ -483,6 +495,9 @@ let preview_rotate = $ref(
let preview_position = $ref( let preview_position = $ref(
"$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]" "$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]"
); );
let preview_crop = $ref(
"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]"
);
let preview_scale = $ref( let preview_scale = $ref(
"$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]" "$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]"
); );

1
packages/client/src/scripts/mfm-tags.ts
View File

@ -12,6 +12,7 @@ export const MFM_TAGS = [
"x4", "x4",
"scale", "scale",
"position", "position",
"crop",
"fg", "fg",
"bg", "bg",
"font", "font",