From e208a96e3105e4be5763b3ac9a4077623ed5b434 Mon Sep 17 00:00:00 2001 From: Isabell Date: Sun, 28 May 2023 15:19:57 +1000 Subject: [PATCH] add ability to crop content --- locales/de-DE.yml | 2 ++ locales/en-US.yml | 2 ++ packages/client/src/components/mfm.ts | 8 ++++++++ packages/client/src/pages/mfm-cheat-sheet.vue | 15 +++++++++++++++ packages/client/src/scripts/mfm-tags.ts | 1 + 5 files changed, 28 insertions(+) diff --git a/locales/de-DE.yml b/locales/de-DE.yml index 8ddba5ae0..2a039af4c 100644 --- a/locales/de-DE.yml +++ b/locales/de-DE.yml @@ -1178,6 +1178,8 @@ _mfm: background: Hintergrundfarbe positionDescription: Inhalt um einen bestimmten Betrag verschieben. position: Position + cropDescription: Inhalt zuschneiden. + crop: Zuschneiden scale: Maßstab scaleDescription: Skaliere den Inhalt um einen bestimmten Betrag. foregroundDescription: Ändern der Vordergrundfarbe von Text. diff --git a/locales/en-US.yml b/locales/en-US.yml index 6fe8bccfc..84e68ea6b 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1270,6 +1270,8 @@ _mfm: fadeDescription: "Fades content in and out." position: "Position" positionDescription: "Move content by a specified amount." + crop: "Crop" + cropDescription: "Crop content." scale: "Scale" scaleDescription: "Scale content by a specified amount." foreground: "Foreground color" diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index d9d78846e..650a79832 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -243,6 +243,14 @@ export default defineComponent({ style = `transform: translateX(${x}em) translateY(${y}em);`; 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": { const x = Math.min(parseFloat(token.props.args.x ?? "1"), 5); const y = Math.min(parseFloat(token.props.args.y ?? "1"), 5); diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index 50bb43fcd..a22d7ce1e 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -365,6 +365,18 @@ +
+
{{ i18n.ts._mfm.crop }}
+
+

{{ i18n.ts._mfm.cropDescription }}

+
+ + MFM +
+
+
{{ i18n.ts._mfm.position }}
@@ -483,6 +495,9 @@ let preview_rotate = $ref( let preview_position = $ref( "$[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( "$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]" ); diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts index da0bea818..2fadcd80e 100644 --- a/packages/client/src/scripts/mfm-tags.ts +++ b/packages/client/src/scripts/mfm-tags.ts @@ -12,6 +12,7 @@ export const MFM_TAGS = [ "x4", "scale", "position", + "crop", "fg", "bg", "font",