paddingのUIを追加

locales/index.d.ts

@@ -10678,6 +10678,10 @@ export interface Locale extends ILocale {
          * 全体を埋め尽くす
          */
         "repeat": string;
+        /**
+         * 余白
+         */
+        "padding": string;
     };
 }
 declare const locales: {

locales/ja-JP.yml

@@ -2847,3 +2847,4 @@ _watermarkEditor:
   driveFileTypeWarnDescription: "画像ファイルを選択してください"
   repeatSetting: "描画モード"
   repeat: "全体を埋め尽くす"
+  padding: "余白"

packages/frontend/src/components/MkInput.vue

@@ -27,8 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:list="id"
 			:min="min"
 			:max="max"
-			@focus="focused = true"
+			@focus="onFocus"
-			@blur="focused = false"
+			@blur="onBlur"
 			@keydown="onKeydown($event)"
 			@input="onInput"
 		>
@@ -80,6 +80,8 @@ const emit = defineEmits<{
 	(ev: 'change', _ev: KeyboardEvent): void;
 	(ev: 'keydown', _ev: KeyboardEvent): void;
 	(ev: 'enter', _ev: KeyboardEvent): void;
+	(ev: 'focus', _ev: FocusEvent): void;
+	(ev: 'blur', _ev: FocusEvent): void;
 	(ev: 'update:modelValue', value: string | number): void;
 }>();
 
@@ -114,6 +116,14 @@ const onKeydown = (ev: KeyboardEvent) => {
 		emit('enter', ev);
 	}
 };
+const onFocus = (ev: FocusEvent) => {
+	focused.value = true;
+	emit('focus', ev);
+};
+const onBlur = (ev: FocusEvent) => {
+	focused.value = false;
+	emit('blur', ev);
+};
 
 const updated = () => {
 	changed.value = false;

packages/frontend/src/components/MkWatermarkEditorDialog.padding.vue

@@ -0,0 +1,66 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div :class="$style.root">
+		<svg version="1.1" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :class="$style.graphic">
+			<defs>
+				<marker id="Arrow3" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
+					<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
+				</marker>
+				<pattern id="pattern5942" patternTransform="matrix(1.452 1.452 -3.1368 3.8697 -1.7474 -2.9488)" xlink:href="#Strips1_1white" />
+				<pattern id="Strips1_1white" width="2" height="1" patternTransform="translate(0) scale(10)" patternUnits="userSpaceOnUse">
+					<rect y="-.5" width="1" height="2" fill="var(--MI_THEME-panel)" />
+				</pattern>
+				<marker id="Arrow3-6" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
+					<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
+				</marker>
+				<marker id="Arrow3-6-9" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
+					<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
+				</marker>
+				<marker id="Arrow3-6-9-1" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
+					<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
+				</marker>
+			</defs>
+			<g transform="translate(-21.709 -14.787)" stroke-linecap="round" stroke-linejoin="round">
+				<g fill-rule="evenodd">
+					<rect x="21.709" y="14.787" width="120" height="80" fill="var(--MI_THEME-bg)" stop-color="#000000" stroke-dasharray="1.1384, 3.4152" stroke-width="1.1384" style="mix-blend-mode:normal" />
+					<rect x="21.709" y="14.787" width="120" height="80" fill="url(#pattern5942)" stop-color="#000000" stroke-dasharray="1.1384, 3.4152" stroke-width="1.1384" style="mix-blend-mode:normal" />
+					<rect x="47.101" y="40.105" width="69.216" height="29.364" ry="5.3019" fill="var(--MI_THEME-accentDarken)" stop-color="#000000" stroke-dasharray="1.13855, 3.41565" stroke-width="1.1386" />
+				</g>
+				<g fill="none" stroke="var(--MI_THEME-error)">
+					<path v-if="props.arrow === 'top'" d="m81.709 16.167 2e-6 22.601" marker-end="url(#Arrow3)" marker-start="url(#Arrow3)" stop-color="#000000" stroke-width="1.3038" />
+					<path v-else-if="props.arrow === 'left'" d="m23.011 54.787 22.751-4e-6" marker-end="url(#Arrow3-6)" marker-start="url(#Arrow3-6)" stop-color="#000000" stroke-width="1.322" />
+					<path v-else-if="props.arrow === 'bottom'" d="m81.709 70.772-1e-6 22.647" marker-end="url(#Arrow3-6-9)" marker-start="url(#Arrow3-6-9)" stop-color="#000000" stroke-width="1.2715" />
+					<path v-else-if="props.arrow === 'right'" d="m117.58 54.787 22.828 5e-6" marker-end="url(#Arrow3-6-9-1)" marker-start="url(#Arrow3-6-9-1)" stop-color="#000000" stroke-width="1.285" />
+				</g>
+			</g>
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	arrow: 'top' | 'bottom' | 'left' | 'right' | null;
+}>();
+</script>
+
+<style module>
+.root {
+	border-radius: var(--MI-radius);
+	overflow: clip;
+	box-sizing: border-box;
+	border: thin solid var(--MI_THEME-divider);
+	max-width: 242px; /* 240px + 左右ボーダー2px */
+	width: 100%;
+	height: auto;
+}
+
+.graphic {
+	display: block;
+	width: 100%;
+	height: auto;
+}
+</style>

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -62,6 +62,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div :class="$style.formLabel">{{ i18n.ts.position }}</div>
 						<XAnchorSelector v-model="anchor"/>
 					</div>
+
+					<div>
+						<div :class="$style.formLabel">{{ i18n.ts._watermarkEditor.padding }}</div>
+						<div class="_gaps">
+							<XPaddingView :arrow="focusedForm"/>
+							<div class="_gaps_s">
+								<MkInput v-model="paddingTop" debounce @focus="focusedForm = 'top'" @blur="focusedForm = null">
+									<template #prefix><i class="ti ti-border-top"></i></template>
+									<template #suffix>px</template>
+								</MkInput>
+								<MkInput v-model="paddingLeft" debounce @focus="focusedForm = 'left'" @blur="focusedForm = null">
+									<template #prefix><i class="ti ti-border-left"></i></template>
+									<template #suffix>px</template>
+								</MkInput>
+								<MkInput v-model="paddingRight" debounce @focus="focusedForm = 'right'" @blur="focusedForm = null">
+									<template #prefix><i class="ti ti-border-right"></i></template>
+									<template #suffix>px</template>
+								</MkInput>
+								<MkInput v-model="paddingBottom" debounce @focus="focusedForm = 'bottom'" @blur="focusedForm = null">
+									<template #prefix><i class="ti ti-border-bottom"></i></template>
+									<template #suffix>px</template>
+								</MkInput>
+							</div>
+						</div>
+					</div>
 				</template>
 			</div>
 		</div>
@@ -78,6 +103,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRange from '@/components/MkRange.vue';
 import XAnchorSelector from '@/components/MkWatermarkEditorDialog.anchor.vue';
+import XPaddingView from '@/components/MkWatermarkEditorDialog.padding.vue';
 
 import * as os from '@/os.js';
 import { defaultStore } from '@/store.js';
@@ -140,6 +166,33 @@ const rotate = computed({
 	get: () => watermarkConfig.value?.rotate ?? 15,
 	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, rotate: v },
 });
+function setPadding(pos: 'top' | 'left' | 'right' | 'bottom', val: number) {
+	const padding = {
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		...watermarkConfig.value?.padding,
+		[pos]: val,
+	};
+	watermarkConfig.value = { ...watermarkConfig.value, padding };
+}
+const paddingTop = computed({
+	get: () => watermarkConfig.value?.padding?.top ?? 0,
+	set: (v) => setPadding('top', v),
+});
+const paddingLeft = computed({
+	get: () => watermarkConfig.value?.padding?.left ?? 0,
+	set: (v) => setPadding('left', v),
+});
+const paddingRight = computed({
+	get: () => watermarkConfig.value?.padding?.right ?? 0,
+	set: (v) => setPadding('right', v),
+});
+const paddingBottom = computed({
+	get: () => watermarkConfig.value?.padding?.bottom ?? 0,
+	set: (v) => setPadding('bottom', v),
+});
 //#endregion
 
 //#region ファイル選択
@@ -210,6 +263,10 @@ onMounted(() => {
 		}
 	}, { immediate: true, deep: true });
 });
+//#endregion
+
+//#region paddingViewの制御
+const focusedForm = ref<'top' | 'left' | 'right' | 'bottom' | null>(null);
 
 //#endregion
 </script>