Bump version to 2025.6.1-alpha.2

* enhance(frontend): エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように

* fix: trackの計算方法を修正

* remove unnecessary async

.github/workflows/on-release-created.yml

@@ -26,6 +26,8 @@ jobs:
         with:
           node-version-file: '.node-version'
           cache: 'pnpm'
+          # see https://docs.github.com/actions/use-cases-and-examples/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry
+          registry-url: 'https://registry.npmjs.org'
       - name: Publish package
         run: |
           pnpm i --frozen-lockfile

cypress/e2e/basic.cy.ts

@@ -34,7 +34,6 @@ describe('Before setup instance', () => {
 
 		cy.intercept('POST', '/api/admin/update-meta').as('update-meta');
 
-		cy.get('[data-cy-next]').click();
 		cy.get('[data-cy-next]').click();
 		cy.get('[data-cy-server-name] input').type('Testskey');
 		cy.get('[data-cy-server-setup-wizard-apply]').click();

locales/index.d.ts

@@ -12176,6 +12176,10 @@ export interface Locale extends ILocale {
              * 白黒
              */
             "grayscale": string;
+            /**
+             * 色調補正
+             */
+            "colorAdjust": string;
             /**
              * 色の圧縮
              */

locales/ja-JP.yml

@@ -3262,6 +3262,7 @@ _imageEffector:
     mirror: "ミラー"
     invert: "色の反転"
     grayscale: "白黒"
+    colorAdjust: "色調補正"
     colorClamp: "色の圧縮"
     colorClampAdvanced: "色の圧縮(高度)"
     distort: "歪み"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.6.1-alpha.1",
+	"version": "2025.6.1-alpha.2",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/frontend/src/components/MkImageEffectorDialog.Layer.vue

@@ -16,22 +16,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div :class="$style.root" class="_gaps">
 		<div v-for="[k, v] in Object.entries(fx.params)" :key="k">
-			<MkSwitch v-if="v.type === 'boolean'" v-model="layer.params[k]">
+			<MkSwitch
+				v-if="v.type === 'boolean'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 			</MkSwitch>
-			<MkRange v-else-if="v.type === 'number'" v-model="layer.params[k]" continuousUpdate :min="v.min" :max="v.max" :step="v.step">
+			<MkRange
+				v-else-if="v.type === 'number'"
+				v-model="layer.params[k]"
+				continuousUpdate
+				:min="v.min"
+				:max="v.max"
+				:step="v.step"
+				@thumbDoubleClicked="() => {
+					if (fx.params[k].default != null) {
+						layer.params[k] = fx.params[k].default;
+					} else {
+						layer.params[k] = v.min;
+					}
+				}"
+			>
 				<template #label>{{ k }}</template>
 			</MkRange>
-			<MkRadios v-else-if="v.type === 'number:enum'" v-model="layer.params[k]">
+			<MkRadios
+				v-else-if="v.type === 'number:enum'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 				<option v-for="item in v.enum" :value="item.value">{{ item.label }}</option>
 			</MkRadios>
 			<div v-else-if="v.type === 'seed'">
-				<MkRange v-model="layer.params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1">
+				<MkRange
+					v-model="layer.params[k]"
+					continuousUpdate
+					type="number"
+					:min="0"
+					:max="10000"
+					:step="1"
+				>
 					<template #label>{{ k }}</template>
 				</MkRange>
 			</div>
-			<MkInput v-else-if="v.type === 'color'" :modelValue="`#${(layer.params[k][0] * 255).toString(16).padStart(2, '0')}${(layer.params[k][1] * 255).toString(16).padStart(2, '0')}${(layer.params[k][2] * 255).toString(16).padStart(2, '0')}`" type="color" @update:modelValue="v => { const c = v.slice(1).match(/.{2}/g)?.map(x => parseInt(x, 16) / 255); if (c) layer.params[k] = c; }">
+			<MkInput
+				v-else-if="v.type === 'color'"
+				:modelValue="getHex(layer.params[k])"
+				type="color"
+				@update:modelValue="v => { const c = getRgb(v); if (c != null) layer.params[k] = c; }"
+			>
 				<template #label>{{ k }}</template>
 			</MkInput>
 		</div>
@@ -40,22 +72,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, onMounted, onUnmounted } from 'vue';
 import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { i18n } from '@/i18n.js';
-import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRange from '@/components/MkRange.vue';
-import FormSlot from '@/components/form/slot.vue';
-import MkPositionSelector from '@/components/MkPositionSelector.vue';
-import * as os from '@/os.js';
-import { selectFile } from '@/utility/drive.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { prefer } from '@/preferences.js';
 import { FXS } from '@/utility/image-effector/fxs.js';
 
 const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
@@ -69,6 +93,24 @@ const emit = defineEmits<{
 	(e: 'swapUp'): void;
 	(e: 'swapDown'): void;
 }>();
+
+function getHex(c: [number, number, number]) {
+	return `#${c.map(x => (x * 255).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function getRgb(hex: string | number): [number, number, number] | null {
+	if (
+		typeof hex === 'number' ||
+		typeof hex !== 'string' ||
+		!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)
+	) {
+		return null;
+	}
+
+	const m = hex.slice(1).match(/[0-9a-fA-F]{2}/g);
+	if (m == null) return [0, 0, 0];
+	return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
+}
 </script>
 
 <style module>

packages/frontend/src/components/MkRange.vue

@@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<slot name="prefix"></slot>
 		<div ref="containerEl" class="container">
 			<div class="track">
-				<div class="highlight right" :style="{ width: ((steppedRawValue - minRatio) * 100) + '%', left: (Math.abs(Math.min(0, min)) / (max + Math.abs(Math.min(0, min)))) * 100 + '%' }">
+				<div class="highlight right" :style="{ width: rightTrackWidth, left: rightTrackPosition }">
 					<div class="shine right"></div>
 				</div>
-				<div class="highlight left" :style="{ width: ((minRatio - steppedRawValue) * 100) + '%', left: (steppedRawValue) * 100 + '%' }">
+				<div class="highlight left" :style="{ width: leftTrackWidth, left: leftTrackPosition }">
 					<div class="shine left"></div>
 				</div>
 			</div>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, onUnmounted, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
 import { isTouchUsing } from '@/utility/touch.js';
 import * as os from '@/os.js';
 
@@ -58,13 +58,14 @@ const props = withDefaults(defineProps<{
 	continuousUpdate?: boolean;
 }>(), {
 	step: 1,
-	textConverter: (v) => v.toString(),
+	textConverter: (v: number) => (Math.round(v * 1000) / 1000).toString(),
 	easing: false,
 });
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: number): void;
 	(ev: 'dragEnded', value: number): void;
+	(ev: 'thumbDoubleClicked'): void;
 }>();
 
 const containerEl = useTemplateRef('containerEl');
@@ -73,7 +74,24 @@ const thumbEl = useTemplateRef('thumbEl');
 const maxRatio = computed(() => Math.abs(props.max) / (props.max + Math.abs(Math.min(0, props.min))));
 const minRatio = computed(() => Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min))));
 
-const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
+const rightTrackWidth = computed(() => {
+	return Math.max(0, (steppedRawValue.value - minRatio.value) * 100) + '%';
+});
+const leftTrackWidth = computed(() => {
+	return Math.max(0, (minRatio.value - steppedRawValue.value) * 100) + '%';
+});
+const rightTrackPosition = computed(() => {
+	return (Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min)))) * 100 + '%';
+});
+const leftTrackPosition = computed(() => {
+	return (Math.min(minRatio.value, steppedRawValue.value) * 100) + '%';
+});
+
+const calcRawValue = (value: number) => {
+	return (value - props.min) / (props.max - props.min);
+};
+
+const rawValue = ref(calcRawValue(props.modelValue));
 const steppedRawValue = computed(() => {
 	if (props.step) {
 		const step = props.step / (props.max - props.min);
@@ -103,6 +121,11 @@ const calcThumbPosition = () => {
 	}
 };
 watch([steppedRawValue, containerEl], calcThumbPosition);
+watch(() => props.modelValue, (newVal) => {
+	const newRawValue = calcRawValue(newVal);
+	if (rawValue.value === newRawValue) return;
+	rawValue.value = newRawValue;
+});
 
 let ro: ResizeObserver | undefined;
 
@@ -128,6 +151,12 @@ const steps = computed(() => {
 const tooltipForDragShowing = ref(false);
 const tooltipForHoverShowing = ref(false);
 
+onBeforeUnmount(() => {
+	// 何らかの問題で表示されっぱなしでもコンポーネントを離れたら消えるように
+	tooltipForDragShowing.value = false;
+	tooltipForHoverShowing.value = false;
+});
+
 function onMouseenter() {
 	if (isTouchUsing) return;
 
@@ -138,7 +167,7 @@ function onMouseenter() {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl,
+		targetElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});
@@ -148,6 +177,8 @@ function onMouseenter() {
 	}, { once: true, passive: true });
 }
 
+let lastClickTime: number | null = null;
+
 function onMousedown(ev: MouseEvent | TouchEvent) {
 	ev.preventDefault();
 
@@ -158,7 +189,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl,
+		targetElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});
@@ -203,6 +234,20 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 	window.addEventListener('touchmove', onDrag);
 	window.addEventListener('mouseup', onMouseup, { once: true });
 	window.addEventListener('touchend', onMouseup, { once: true });
+
+	if (lastClickTime == null) {
+		lastClickTime = Date.now();
+		return;
+	} else {
+		const now = Date.now();
+		if (now - lastClickTime < 300) { // 300ms以内のクリックはダブルクリックとみなす
+			lastClickTime = null;
+			emit('thumbDoubleClicked');
+			return;
+		} else {
+			lastClickTime = now;
+		}
+	}
 }
 </script>
 

packages/frontend/src/pages/welcome.setup.vue

@@ -81,18 +81,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkButton>
 				</div>
 				<div v-else-if="step === 1" class="_gaps_m">
-					<div style="text-align: center;" class="_gaps_s">
-						<div><b>{{ i18n.ts._serverSetupWizard.donationRequest }}</b></div>
-						<div>{{ i18n.ts._serverSetupWizard._donationRequest.text1 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text2 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text3 }}</div>
-					</div>
-					<MkLink target="_blank" url="https://misskey-hub.net/docs/donate/" style="margin: 0 auto;">{{ i18n.ts.learnMore }}</MkLink>
-					<div class="_buttonsCenter">
-						<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="step++">
-							{{ i18n.ts.next }}
-						</MkButton>
-					</div>
-				</div>
-				<div v-else-if="step === 2" class="_gaps_m">
 					<div style="text-align: center;" class="_gaps_s">
 						<div style="font-size: 120%;"><b>{{ i18n.ts._serverSetupWizard.serverSetting }}</b></div>
 						<div>{{ i18n.ts._serverSetupWizard.youCanEasilyConfigureOptimalServerSettingsWithThisWizard }}</div>
@@ -105,12 +93,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 						{{ i18n.ts._serverSetupWizard.skipSettings }}
 					</MkButton>
 				</div>
-				<div v-else-if="step === 3" class="_gaps_m">
+				<div v-else-if="step === 2" class="_gaps_m">
 					<div style="text-align: center;" class="_gaps_s">
 						<div><b>{{ i18n.ts._serverSetupWizard.settingsCompleted }}</b></div>
 						<div>{{ i18n.ts._serverSetupWizard.settingsCompleted_description }}</div>
 						<div>{{ i18n.ts._serverSetupWizard.settingsCompleted_description2 }}</div>
 					</div>
+					<div class="_gaps_s" :class="$style.donation">
+						<div><b>{{ i18n.ts._serverSetupWizard.donationRequest }}</b></div>
+						<div>{{ i18n.ts._serverSetupWizard._donationRequest.text1 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text2 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text3 }}</div>
+						<MkLink target="_blank" url="https://misskey-hub.net/docs/donate/" style="margin: 0 auto;">{{ i18n.ts.learnMore }}</MkLink>
+					</div>
 					<div class="_buttonsCenter">
 						<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="finish">
 							{{ i18n.ts.start }}
@@ -232,4 +225,11 @@ function finish() {
 	font-weight: normal;
 	opacity: 0.7;
 }
+
+.donation {
+	background: var(--MI_THEME-accentedBg);
+	border-radius: 12px;
+	padding: 16px;
+	text-align: center;
+}
 </style>

packages/frontend/src/utility/image-effector/fxs.ts

@@ -5,6 +5,7 @@
 
 import { FX_checker } from './fxs/checker.js';
 import { FX_chromaticAberration } from './fxs/chromaticAberration.js';
+import { FX_colorAdjust } from './fxs/colorAdjust.js';
 import { FX_colorClamp } from './fxs/colorClamp.js';
 import { FX_colorClampAdvanced } from './fxs/colorClampAdvanced.js';
 import { FX_distort } from './fxs/distort.js';
@@ -26,6 +27,7 @@ export const FXS = [
 	FX_mirror,
 	FX_invert,
 	FX_grayscale,
+	FX_colorAdjust,
 	FX_colorClamp,
 	FX_colorClampAdvanced,
 	FX_distort,

packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts

@@ -0,0 +1,136 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineImageEffectorFx } from '../ImageEffector.js';
+import { i18n } from '@/i18n.js';
+
+const shader = `#version 300 es
+precision mediump float;
+
+in vec2 in_uv;
+uniform sampler2D in_texture;
+uniform vec2 in_resolution;
+uniform float u_brightness;
+uniform float u_contrast;
+uniform float u_hue;
+uniform float u_lightness;
+uniform float u_saturation;
+out vec4 out_color;
+
+// RGB to HSL
+vec3 rgb2hsl(vec3 c) {
+	float maxc = max(max(c.r, c.g), c.b);
+	float minc = min(min(c.r, c.g), c.b);
+	float l = (maxc + minc) * 0.5;
+	float s = 0.0;
+	float h = 0.0;
+	if (maxc != minc) {
+		float d = maxc - minc;
+		s = l > 0.5 ? d / (2.0 - maxc - minc) : d / (maxc + minc);
+		if (maxc == c.r) {
+			h = (c.g - c.b) / d + (c.g < c.b ? 6.0 : 0.0);
+		} else if (maxc == c.g) {
+			h = (c.b - c.r) / d + 2.0;
+		} else {
+			h = (c.r - c.g) / d + 4.0;
+		}
+		h /= 6.0;
+	}
+	return vec3(h, s, l);
+}
+
+// HSL to RGB
+float hue2rgb(float p, float q, float t) {
+	if (t < 0.0) t += 1.0;
+	if (t > 1.0) t -= 1.0;
+	if (t < 1.0/6.0) return p + (q - p) * 6.0 * t;
+	if (t < 1.0/2.0) return q;
+	if (t < 2.0/3.0) return p + (q - p) * (2.0/3.0 - t) * 6.0;
+	return p;
+}
+vec3 hsl2rgb(vec3 hsl) {
+	float r, g, b;
+	float h = hsl.x;
+	float s = hsl.y;
+	float l = hsl.z;
+	if (s == 0.0) {
+		r = g = b = l;
+	} else {
+		float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s;
+		float p = 2.0 * l - q;
+		r = hue2rgb(p, q, h + 1.0/3.0);
+		g = hue2rgb(p, q, h);
+		b = hue2rgb(p, q, h - 1.0/3.0);
+	}
+	return vec3(r, g, b);
+}
+
+void main() {
+	vec4 in_color = texture(in_texture, in_uv);
+	vec3 color = in_color.rgb;
+
+	color = color * u_brightness;
+	color += vec3(clamp(u_lightness, 0.0, 2.0) - 1.0);
+	color = (color - 0.5) * u_contrast + 0.5;
+
+	vec3 hsl = rgb2hsl(color);
+	hsl.x = mod(hsl.x + u_hue, 1.0);
+	hsl.y = clamp(hsl.y * u_saturation, 0.0, 1.0);
+
+	color = hsl2rgb(hsl);
+	out_color = vec4(color, in_color.a);
+}
+`;
+
+export const FX_colorAdjust = defineImageEffectorFx({
+	id: 'colorAdjust' as const,
+	name: i18n.ts._imageEffector._fxs.colorAdjust,
+	shader,
+	uniforms: ['lightness', 'contrast', 'hue', 'brightness', 'saturation'] as const,
+	params: {
+		lightness: {
+			type: 'number' as const,
+			default: 100,
+			min: 0,
+			max: 200,
+			step: 1,
+		},
+		contrast: {
+			type: 'number' as const,
+			default: 100,
+			min: 0,
+			max: 200,
+			step: 1,
+		},
+		hue: {
+			type: 'number' as const,
+			default: 0,
+			min: -360,
+			max: 360,
+			step: 1,
+		},
+		brightness: {
+			type: 'number' as const,
+			default: 100,
+			min: 0,
+			max: 200,
+			step: 1,
+		},
+		saturation: {
+			type: 'number' as const,
+			default: 100,
+			min: 0,
+			max: 200,
+			step: 1,
+		},
+	},
+	main: ({ gl, u, params }) => {
+		gl.uniform1f(u.brightness, params.brightness / 100);
+		gl.uniform1f(u.contrast, params.contrast / 100);
+		gl.uniform1f(u.hue, params.hue / 360);
+		gl.uniform1f(u.lightness, params.lightness / 100);
+		gl.uniform1f(u.saturation, params.saturation / 100);
+	},
+});

packages/misskey-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2025.6.1-alpha.1",
+	"version": "2025.6.1-alpha.2",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",