デコレーション拡張 resolve #57

locales/en-US.yml

@@ -1181,6 +1181,10 @@ cwNotationRequired: "If \"Hide content\" is enabled, a description must be provi
 doReaction: "Add reaction"
 maxinumLayerError: "You cannot stack more than 6 layers. Please delete other layers."
 layer: "Layer"
+Xcoordinate: "X-Coordinate"
+Ycoordinate: "Y-Coordinate"
+scale: "Scale"
+opacity: "Opacity"
 _announcement:
   forExistingUsers: "Existing users only"
   forExistingUsersDescription: "This announcement will only be shown to users existing at the point of publishment if enabled. If disabled, those newly signing up after it has been posted will also see it."

locales/index.d.ts

@@ -1193,6 +1193,10 @@ export interface Locale {
     "movePluginToAccount": string;
     "movePluginToAccountConfirm": string;
     "overridePluginConfirm": string;
+    "Xcoordinate": string;
+    "Ycoordinate": string;
+    "scale": string;
+    "opacity": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;

locales/ja-JP.yml

@@ -1190,6 +1190,10 @@ syncing: "他端末と同期"
 movePluginToAccount: "アカウントに移行"
 movePluginToAccountConfirm: "プラグインをアカウントに移行して他端末と同期しますか？プラグインとプラグイン設定以外は引き継がれません。"
 overridePluginConfirm: "すでにプラグインがアカウントに存在します。上書きしますか？アカウントにあるプラグインデータは削除されます。"
+Xcoordinate: "X座標"
+Ycoordinate: "Y座標"
+scale: "大きさ"
+opacity: "不透明度"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"

packages/backend/src/core/entities/UserEntityService.ts

@@ -364,6 +364,10 @@ export class UserEntityService implements OnModuleInit {
 				id: ud.id,
 				angle: ud.angle || undefined,
 				flipH: ud.flipH || undefined,
+				scale: ud.scale || undefined,
+				moveX: ud.moveX || undefined,
+				moveY: ud.moveY || undefined,
+				opacity: ud.opacity || undefined,
 				url: decorations.find(d => d.id === ud.id)!.url,
 			}))) : [],
 			isBot: user.isBot,

packages/backend/src/models/User.ts

@@ -151,6 +151,10 @@ export class MiUser {
 		id: string;
 		angle: number;
 		flipH: boolean;
+		scale: number;
+		moveX: number;
+		moveY: number;
+		opacity: number;
 	}[];
 
 	@Index()

packages/backend/src/server/api/endpoints/i/update.ts

@@ -138,6 +138,10 @@ export const paramDef = {
 				id: { type: 'string', format: 'misskey:id' },
 				angle: { type: 'number', nullable: true, maximum: 0.5, minimum: -0.5 },
 				flipH: { type: 'boolean', nullable: true },
+				scale: { type: 'number', nullable: true, maximum: 1.5, minimum: 0.5 },
+				moveX: { type: 'number', nullable: true, maximum: 25, minimum: -25 },
+				moveY: { type: 'number', nullable: true, maximum: 25, minimum: -25 },
+				opacity: { type: 'number', nullable: true, maximum: 1, minimum: 0.1 },
 			},
 			required: ['id'],
 		} },
@@ -319,6 +323,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 					id: d.id,
 					angle: d.angle ?? 0,
 					flipH: d.flipH ?? false,
+					scale: d.scale ?? 1,
+					moveX: d.moveX ?? 0,
+					moveY: d.moveY ?? 0,
+					opacity: d.opacity ?? 1,
 				}));
 			}
 

packages/frontend/src/components/global/MkAvatar.vue

@@ -33,6 +33,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:style="{
 			rotate: getDecorationAngle(avatarDecoration),
 			scale: getDecorationScale(avatarDecoration),
+			transform: getDecorationTransform(avatarDecoration),
+			opacity: getDecorationOpacity(avatarDecoration),
 		}"
 		alt=""
 	>
@@ -43,6 +45,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:style="{
 			rotate: getDecorationAngle(decoration),
 			scale: getDecorationScale(decoration),
+			transform: getDecorationTransform(decoration),
+			opacity: getDecorationOpacity(decoration),
 		}"
 		alt=""
 	>
@@ -78,6 +82,10 @@ const props = withDefaults(defineProps<{
 		angle?: number;
 		flipH?: boolean;
 		flipV?: boolean;
+		scale?: number;
+		moveX?: number;
+		moveY?: number;
+		opacity?: number;
 	};
 	forceShowDecoration?: boolean;
 }>(), {
@@ -121,6 +129,18 @@ function getDecorationScale(avatarDecoration) {
 	return scaleX === 1 ? undefined : `${scaleX} 1`;
 }
 
+function getDecorationTransform(avatarDecoration) {
+	let scale = avatarDecoration.scale ?? 1;
+	let moveX = avatarDecoration.moveX ?? 0;
+	let moveY = avatarDecoration.moveY ?? 0;
+	return `${scale === 1 ? '' : `scale(${scale})`} ${moveX === 0 && moveY === 0 ? '' : `translate(${moveX}%, ${moveY}%)`}`;
+}
+
+function getDecorationOpacity(avatarDecoration) {
+	let opacity = avatarDecoration.opacity ?? 1;
+	return opacity === 1 ? undefined : opacity;
+}
+
 let color = $ref<string | undefined>();
 
 watch(() => props.user.avatarBlurhash, () => {

packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModalWindow
 	ref="dialog"
 	:width="400"
-	:height="450"
+	:height="600"
 	@close="cancel"
 	@closed="emit('closed')"
 >
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :marginMin="20" :marginMax="28">
 			<div style="text-align: center;">
 				<div :class="$style.name">{{ decoration.name }}</div>
-				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }" forceShowDecoration/>
+				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH, scale, moveX, moveY, opacity }" forceShowDecoration/>
 			</div>
 			<div class="_gaps_s">
 				<MkRadios v-model="insertLayer">
@@ -34,6 +34,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="flipH">
 					<template #label>{{ i18n.ts.flip }}</template>
 				</MkSwitch>
+				<MkRange v-model="scale" continuousUpdate :min="0.5" :max="1.5" :step="0.05" :textConverter="(v) => `${v.toFixed(2)}x`">
+					<template #label>{{ i18n.ts.scale }}</template>
+				</MkRange>
+				<MkRange v-model="moveX" continuousUpdate :min="-25" :max="25" :step="1">
+					<template #label>{{ i18n.ts.Xcoordinate }}</template>
+				</MkRange>
+				<MkRange v-model="moveY" continuousUpdate :min="-25" :max="25" :step="1">
+					<template #label>{{ i18n.ts.Ycoordinate }}</template>
+				</MkRange>
+				<MkRange v-model="opacity" continuousUpdate :min="0.1" :max="1" :step="0.05" :textConverter="(v) => `${(v * 100).toFixed(2)}%`">
+					<template #label>{{ i18n.ts.opacity }}</template>
+				</MkRange>
 			</div>
 		</MkSpacer>
 
@@ -86,6 +98,10 @@ const layerNum = (() => {
 const insertLayer = ref(layerNum === -1 ? String($i.avatarDecorations.length) : String(layerNum));
 const angle = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).angle ?? 0 : 0);
 const flipH = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).flipH ?? false : false);
+const scale = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).scale ?? 1 : 1);
+const moveX = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).moveX ?? 0 : 0);
+const moveY = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).moveY ?? 0 : 0);
+const opacity = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).opacity ?? 1 : 1);
 
 function cancel() {
 	dialog.value.close();
@@ -96,6 +112,10 @@ async function attach() {
 		id: props.decoration.id,
 		angle: angle.value,
 		flipH: flipH.value,
+		scale: scale.value,
+		moveX: moveX.value,
+		moveY: moveY.value,
+		opacity: opacity.value
 	};
 	const updatedDecorations = $i.avatarDecorations.toSpliced(layerNum, layerNum === -1 ? 0 : 1).toSpliced(Number(insertLayer.value), 0, decoration);
 	await os.apiWithDialog('i/update', {