danoniplus 48.2.0 → 48.4.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/05/30
+ * Revised : 2026/06/02
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 48.2.0`;
-const g_revisedDate = `2026/05/30`;
+const g_version = `Ver 48.4.0`;
+const g_revisedDate = `2026/06/02`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -4359,8 +4359,26 @@ const headerConvert = _dosObj => {
 	obj.baseSpeed = 1 + ((g_posObj.distY - (g_posObj.stepY - C_STEP_Y) * 2) / (500 - C_STEP_Y) - 1) * 0.85;
 
 	// 矢印・フリーズアロー判定位置補正
+	g_diffObj.arrowJdgX = (isNaN(parseFloat(_dosObj.arrowJdgX)) ? 0 : parseFloat(_dosObj.arrowJdgX));
 	g_diffObj.arrowJdgY = (isNaN(parseFloat(_dosObj.arrowJdgY)) ? 0 : parseFloat(_dosObj.arrowJdgY));
+	g_diffObj.frzJdgX = (isNaN(parseFloat(_dosObj.frzJdgX)) ? 0 : parseFloat(_dosObj.frzJdgX));
 	g_diffObj.frzJdgY = (isNaN(parseFloat(_dosObj.frzJdgY)) ? 0 : parseFloat(_dosObj.frzJdgY));
+	g_diffInitObj.arrowJdgX = g_diffObj.arrowJdgX;
+	g_diffInitObj.arrowJdgY = g_diffObj.arrowJdgY;
+	g_diffInitObj.frzJdgX = g_diffObj.frzJdgX;
+	g_diffInitObj.frzJdgY = g_diffObj.frzJdgY;
+
+	// ショートカット表示位置補正
+	g_diffObj.shortcutX = (isNaN(parseFloat(_dosObj.shortcutX)) ? 0 : parseFloat(_dosObj.shortcutX));
+	g_diffObj.shortcutY = (isNaN(parseFloat(_dosObj.shortcutY)) ? 0 : parseFloat(_dosObj.shortcutY));
+	g_diffInitObj.shortcutX = g_diffObj.shortcutX;
+	g_diffInitObj.shortcutY = g_diffObj.shortcutY;
+
+	if (Object.keys(g_diffObj).some(key => g_localStorage[key] !== undefined)) {
+		Object.keys(g_diffObj).forEach(key =>
+			g_diffObj[key] = setIntVal(g_localStorage[key], g_diffObj[key])
+		);
+	}
 
 	// musicフォルダ設定
 	obj.musicFolder = _dosObj.musicFolder ?? (g_remoteFlg ? `${C_MRK_CURRENT_DIRECTORY}../music` : `music`);
@@ -9111,8 +9129,9 @@ let g_previewLsnrKeys = new Set();
 
 /** プレビュー内の各UIオブジェクトの現在座標 */
 const g_previewPos = {
-	jdgJ: { x: null, y: null },   // 通常判定キャラクタ・コンボ
-	jdgFJ: { x: null, y: null },   // フリーズ判定キャラクタ・コンボ
+	arrowJdg: { x: null, y: null },   // 通常判定キャラクタ・コンボ
+	frzJdg: { x: null, y: null },     // フリーズ判定キャラクタ・コンボ
+	shortcut: { x: null, y: null },
 };
 
 /**
@@ -9152,7 +9171,7 @@ const openDisplayPreview = () => {
 	// オーバーレイ本体
 	// ============================================================
 	const overlay = createEmptySprite(divRoot, `displayPreviewOverlay`, {
-		w: g_sWidth, h: g_sHeight, background: g_headerObj.baseBrightFlg ? `#eeeeeedd` : `#111111dd`, pointerEvents: C_DIS_AUTO,
+		w: g_sWidth, h: g_sHeight, background: g_headerObj.baseBrightFlg ? `#eeeeeeee` : `#111111dd`, pointerEvents: C_DIS_AUTO,
 	});
 	g_previewRoot = overlay;
 	multiAppend(overlay,
@@ -9161,8 +9180,23 @@ const openDisplayPreview = () => {
 		createCss2Button(`btnDisplayPreview2`, `↑ Preview`, _evt => {
 			toggleDisplayPreview();
 		}, g_lblPosObj.btnDisplayPreview, g_cssObj.button_Setting),
+		createCss2Button(`btnDisplayReset`, `Reset`, _evt => {
+			if (window.confirm(g_msgObj.displayPreviewResetConfirm)) {
+				Object.assign(g_diffObj, g_diffInitObj);
+				Object.keys(g_diffInitObj).forEach(key => {
+					g_localStorage[key] = g_diffInitObj[key];
+				});
+				Object.keys(g_previewPos).forEach(key => g_previewPos[key] = { x: null, y: null });
+				closeDisplayPreview();
+				openDisplayPreview();
+			}
+		}, g_lblPosObj.btnDisplayReset, g_cssObj.button_Reset),
 		createDescDiv(`lblDisplayPreviewMsg`, g_lblNameObj.displayPreviewDesc),
 	);
+	if (g_headerObj.scAreaWidth > 0) {
+		overlay.appendChild(createDescDiv(`lblDisplayPreviewMsg2`, g_lblNameObj.displayPreviewDesc2));
+	}
+	createScText(btnDisplayReset, `DisplayPreviewReset`, { displayName: `displayPreview`, targetLabel: `btnDisplayReset`, x: -15 });
 
 	// ============================================================
 	// プレイ画面フレーム（白枠）
@@ -9175,9 +9209,8 @@ const openDisplayPreview = () => {
 
 	const frame = createEmptySprite(overlay, `previewFrame`, {
 		x: frameX, y: frameY, w: playW, h: playH,
-		background: `#111111`,
+		background: g_headerObj.baseBrightFlg ? `#eeeeee` : `#111111`,
 		border: `1px solid #444444`,
-		overflow: `hidden`,
 		boxSizing: `border-box`,
 		transform: `scale(${rate})`,
 	});
@@ -9233,6 +9266,13 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 	// ============================================================
 	const stepY = g_posObj.stepY ?? C_STEP_Y;
 	const revStepY = g_posObj.reverseStepY;
+	const hitPos = g_stateObj.hitPosition ?? 0;
+
+	// 簡易ステップゾーン（7レーン分）
+	const laneCount = 7;
+	const laneW = 50;
+	const totalW = laneCount * laneW;
+	const startX = Math.round((_playW - totalW) / 2);
 
 	if (d.stepzone === C_FLG_OFF) {
 		multiAppend(_frame,
@@ -9240,12 +9280,6 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 			disableBox(`StepZone_Rev`, { x: Math.round(_playW / 2 - 200), y: C_STEP_Y + revStepY, w: 400, h: 50 }),
 		);
 	} else {
-		// 簡易ステップゾーン（7レーン分）
-		const laneCount = 7;
-		const laneW = 50;
-		const totalW = laneCount * laneW;
-		const startX = Math.round((_playW - totalW) / 2);
-
 		for (let j = 0; j < laneCount; j++) {
 			createEmptySprite(_frame, `previewStep${j}`, {
 				x: startX + j * laneW + 2, y: stepY + 2, w: laneW - 4, h: laneW - 4,
@@ -9260,6 +9294,45 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		}
 	}
 
+	// ============================================================
+	// HitPosition を視覚化する判定基準ライン
+	// ============================================================
+	// 通常譜面用の判定ライン（赤または目立つ色で、レーン幅全体をカバー）
+	// 上から下に流れる場合、hitPosがプラスなら「ステップゾーンより下」にラインが来る
+	const lineNormal = createEmptySprite(_frame, `previewHitPosLine`, {
+		x: startX,
+		y: stepY + Math.round(laneW / 2) + hitPos, // ステップゾーンの中心 + hitPos 
+		w: totalW,
+		h: 2, // 2pxの横線
+		background: `#33aaff`,
+		boxShadow: `0 0 4px #33aaff`, // ネオンっぽく光らせて目立たせる
+	});
+
+	// 青いラインの右端（totalW から10pxほど外側）に数値を表示
+	multiAppend(
+		lineNormal,
+		createDivCss2Label(`previewHitPosTitle`, `Hit`, {
+			...g_lblPosObj.previewHitPosText, x: -60, y: -14, align: C_ALIGN_RIGHT,
+		}),
+		createDivCss2Label(`previewHitPosTitle2`, `Position`, {
+			...g_lblPosObj.previewHitPosText, x: -60, y: -2, align: C_ALIGN_RIGHT,
+		}),
+		createDivCss2Label(`previewHitPosText`, `${hitPos > 0 ? '+' : ''}${hitPos}px↑↓`, {
+			...g_lblPosObj.previewHitPosText, x: totalW + 5, y: -8, align: C_ALIGN_LEFT,
+		}),
+	);
+
+	// リバース譜面用の判定ライン
+	// 下から上に流れる場合、hitPosがプラスなら「ステップゾーンより上（座標としてはマイナス）」に来る
+	createEmptySprite(_frame, `previewHitPosLineRev`, {
+		x: startX,
+		y: (C_STEP_Y + revStepY) + Math.round(laneW / 2) - hitPos, // ステップゾーンの中心 - hitPos
+		w: totalW,
+		h: 2,
+		background: `#ffaa00`,
+		boxShadow: `0 0 4px #ffaa00`,
+	});
+
 	// ============================================================
 	// 判定エリア（ドラッグ可能）
 	// ============================================================
@@ -9273,13 +9346,13 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		const fX0 = Math.round(_playW / 2 - 120) + (g_diffObj.frzJdgX ?? 0);
 		const fY0 = Math.round((_playH + (g_posObj?.stepYR ?? 0)) / 2 + 10) + (g_diffObj.frzJdgY ?? 0);
 
-		const jdgInitX = g_previewPos.jdgJ.x ?? jX0;
-		const jdgInitY = g_previewPos.jdgJ.y ?? jY0;
-		const jdgFInitX = g_previewPos.jdgFJ.x ?? fX0;
-		const jdgFInitY = g_previewPos.jdgFJ.y ?? fY0;
+		const jdgInitX = g_previewPos.arrowJdg.x ?? jX0;
+		const jdgInitY = g_previewPos.arrowJdg.y ?? jY0;
+		const jdgFInitX = g_previewPos.frzJdg.x ?? fX0;
+		const jdgFInitY = g_previewPos.frzJdg.y ?? fY0;
 
 		// 通常判定グループ
-		buildDraggableJudgGroup(_frame, `jdgJ`, jdgInitX, jdgInitY, _playW, _playH, {
+		buildDraggableJudgGroup(_frame, `arrowJdg`, jdgInitX, jdgInitY, _playW, _playH, {
 			charaText: d.judgment === C_FLG_ON ? g_lblNameObj.j_ii : ``,
 			comboText: d.judgment === C_FLG_ON ? `5 Combo!!` : ``,
 			diffText: `Fast 3 Frames`,
@@ -9287,7 +9360,7 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		});
 
 		// フリーズ判定グループ
-		buildDraggableJudgGroup(_frame, `jdgFJ`, jdgFInitX, jdgFInitY, _playW, _playH, {
+		buildDraggableJudgGroup(_frame, `frzJdg`, jdgFInitX, jdgFInitY, _playW, _playH, {
 			charaText: d.judgment === C_FLG_ON ? g_lblNameObj.j_kita : ``,
 			comboText: d.judgment === C_FLG_ON ? `5 Combo!!` : ``,
 			diffText: `Fast 2 Frames`,
@@ -9302,9 +9375,9 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		_frame.appendChild(disableBox(`LifeGauge`, g_lblPosObj.previewLifeDisabled));
 	} else {
 		multiAppend(_frame,
-			createDivCss2Label(`previewLifeBack`, ``, g_lblPosObj.previewLifeBack),
-			createDivCss2Label(`previewLifeBar`, ``, g_lblPosObj.previewLifeBar),
-			createDivCss2Label(`previewLifeNum`, `700`, g_lblPosObj.previewLifeNum),
+			createDivCss2Label(`previewLifeBack`, ``, g_lblPosObj.previewLifeBack, g_cssObj.life_Background),
+			createDivCss2Label(`previewLifeBar`, ``, g_lblPosObj.previewLifeBar, g_cssObj.life_Cleared),
+			createDivCss2Label(`previewLifeNum`, `700`, g_lblPosObj.previewLifeNum, g_cssObj.life_Cleared),
 		);
 	}
 
@@ -9319,31 +9392,31 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		}
 	} else {
 		const scoreItems = [
-			{ color: `#66ffff`, cnt: `5` },
-			{ color: `#99ff99`, cnt: `0` },
-			{ color: `#ffcc66`, cnt: `0` },
-			{ color: `#cc99ff`, cnt: `0` },
-			{ color: `#ff9999`, cnt: `0` },
-			{ color: `#ffffff`, cnt: `5` },
+			{ name: `ii`, cnt: `5` },
+			{ name: `shakin`, cnt: `0` },
+			{ name: `matari`, cnt: `0` },
+			{ name: `shobon`, cnt: `0` },
+			{ name: `uwan`, cnt: `0` },
+			{ name: `combo`, cnt: `5` },
 			{},
-			{ color: `#ffff99`, cnt: `5` },
-			{ color: `#99ff66`, cnt: `0` },
-			{ color: `#ffffff`, cnt: `5` },
+			{ name: `kita`, cnt: `5` },
+			{ name: `iknai`, cnt: `0` },
+			{ name: `combo`, cnt: `5` },
 		];
-		const sx = _playW - 110;
+		const sx = _playW - 110 + g_headerObj.scAreaWidth;
 		scoreItems.forEach((item, i) => {
 			_frame.appendChild(
 				createDivCss2Label(`previewScore${i}`, item.cnt || ``, {
 					x: sx + 50, y: 20 * (i + 1), w: 50, h: 20,
-					siz: 16, color: item.color, align: `right`,
-				}),
+					siz: 16, align: `right`,
+				}, g_cssObj[`common_${item.name}`]),
 			);
 		});
 
 		// FrzReturn用ゲージ
 		if (g_stateObj.frzReturn !== C_FLG_OFF) {
 			multiAppend(_frame,
-				createDivCss2Label(`previewFrzLifeBack`, ``, g_lblPosObj.previewFrzLifeBack),
+				createDivCss2Label(`previewFrzLifeBack`, ``, g_lblPosObj.previewFrzLifeBack, g_cssObj.life_Background),
 				createDivCss2Label(`previewFrzLifeBar`, ``, g_lblPosObj.previewFrzLifeBar, g_cssObj.life_frzNormal),
 			);
 		}
@@ -9377,25 +9450,96 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		)
 	}
 
+	// ============================================================
+	// ショートカット表示
+	// ============================================================
+	const scGroup = createEmptySprite(_frame, `previewScGroup`, {
+		x: g_sWidth + g_headerObj.scAreaWidth - 85 + g_diffObj.shortcutX,
+		y: _playH - 65 + g_diffObj.shortcutY, w: 80, h: 65, pointerEvents: C_DIS_AUTO,
+	});
+	multiAppend(scGroup,
+		createDivCss2Label(`lblRetry`, `[${g_lblNameObj.l_retry}]`, { ...g_lblPosObj.lblMainScHeader, x: 0, y: 0 }),
+		createDivCss2Label(`lblRetrySc`, g_kCd[g_headerObj.keyRetry],
+			{ ...g_lblPosObj.lblMainScKey, x: 0, y: 15, fontWeight: g_headerObj.keyRetry === C_KEY_RETRY ? `normal` : `bold` }),
+		createDivCss2Label(`lblTitleBack`, `[${g_lblNameObj.l_titleBack}]`, { ...g_lblPosObj.lblMainScHeader, x: 0, y: 35 }),
+		createDivCss2Label(`lblTitleBackSc`, g_isMac ? `Shift+${g_kCd[g_headerObj.keyRetry]}` : g_kCd[g_headerObj.keyTitleBack],
+			{ ...g_lblPosObj.lblMainScKey, x: 0, y: 50, fontWeight: g_headerObj.keyTitleBack === C_KEY_TITLEBACK ? `normal` : `bold` }),
+	);
+	const scConfig = {
+		toastTitle: g_lblNameObj.shortcutUpdate,
+		getStdX: (pw) => g_sWidth + g_headerObj.scAreaWidth - 85,
+		getStdY: (ph, syr) => _playH - 65,
+	};
+	makeElementDraggable(scGroup, `shortcut`, _playW, _playH, { w: 80, h: 65 }, scConfig);
+
 	// ユーザカスタムイベント(プレビュー表示用)
 	safeExecuteCustomHooks(`g_customJsObj.displayPreview`, g_customJsObj.displayPreview, _frame, _playW, _playH);
 };
 
+/**
+ * プレビューが表示されたまま、HitPositionのラインだけを動かす
+ * @param {number} _newHitPos 新しい g_stateObj.hitPosition の値
+ */
+const updatePreviewHitPositionLine = (_newHitPos) => {
+
+	// 表示用の文字列を作成（例: "+15px", "-8px", "0px"）
+	const sign = _newHitPos > 0 ? `+` : ``;
+	const textValue = `${sign}${_newHitPos}px↑↓`;
+
+	// 1. 各種基準座標を再取得（buildPreviewUI 内の計算ロジックと同期）
+	const stepY = g_posObj.stepY ?? C_STEP_Y;
+	const revStepY = g_posObj.reverseStepY;
+	const laneW = 50;
+
+	// 2. DOM要素を直接取得
+	const lineNormal = document.getElementById(`previewHitPosLine`);
+	const lineReverse = document.getElementById(`previewHitPosLineRev`);
+	const textNormal = document.getElementById(`previewHitPosText`);
+
+	// 3. プレビューが表示されている場合のみ、style.top を直接書き換える
+	if (lineNormal) {
+		const newY = stepY + Math.round(laneW / 2) + _newHitPos;
+		lineNormal.style.top = wUnit(newY);
+	}
+	if (textNormal) {
+		textNormal.textContent = textValue;
+	}
+
+	if (lineReverse) {
+		const newY = (C_STEP_Y + revStepY) + Math.round(laneW / 2) - _newHitPos;
+		lineReverse.style.top = wUnit(newY);
+	}
+};
+
 /**
  * 要素をドラッグ可能にする（汎用ユーティリティ）
  * @param {HTMLElement} _target ドラッグ対象の要素
+ * @param {string} _key 座標保存用のキー（g_previewPosオブジェクトのプロパティ名）
  * @param {number} _playW 制限範囲の幅
  * @param {number} _playH 制限範囲の高さ
- * @param {object} _bounds 要素自体のサイズ { w, h } (はみ出し防止用)
- * @param {function} _onDragEnd 位置確定時に呼ばれるコールバック (_finalX, _finalY) => void
+ * @param {object} _bounds 要素自体のサイズ { w, h, scale } (はみ出し防止用)
+ * @param {object} _config 座標反映ルールオブジェクト
  */
-const makeElementDraggable = (_target, _playW, _playH, _bounds, _onDragEnd) => {
+const makeElementDraggable = (_target, _key, _playW, _playH, _bounds, _config) => {
 	let dragging = false;
 	let dragStartX = 0, dragStartY = 0;
 	let elemStartX = 0, elemStartY = 0;
 
 	const boundsW = _bounds?.w ?? _target.offsetWidth ?? 0;
 	const boundsH = _bounds?.h ?? _target.offsetHeight ?? 0;
+	const scale = _bounds?.scale ?? 0.8;
+
+	// ドラッグハンドル（薄い枠）を作成
+	const handleId = _target.id ? `handle_${_target.id}` : `dragHandle_${Math.random().toString(36).slice(2, 9)}`;
+	_target.style.cursor = `grab`;
+
+	const bgColor = g_headerObj.baseBrightFlg ? `0,0,0` : `255,255,255`;
+	createEmptySprite(_target, handleId, {
+		x: 0, y: 0, w: boundsW, h: boundsH,
+		border: `1px dashed rgba(${bgColor},0.3)`,
+		boxSizing: `border-box`, borderRadius: `2px`,
+		background: `rgba(${bgColor},0.04)`,
+	});
 
 	const keyDown = addPreviewListener(_target, `pointerdown`, _evt => {
 		dragging = true;
@@ -9410,11 +9554,18 @@ const makeElementDraggable = (_target, _playW, _playH, _bounds, _onDragEnd) => {
 
 	const keyMove = addPreviewListener(_target, `pointermove`, _evt => {
 		if (!dragging) return;
-		const dx = _evt.clientX - dragStartX;
-		const dy = _evt.clientY - dragStartY;
 
-		// 境界値制限
-		const newX = Math.max(0, Math.min(_playW - boundsW, elemStartX + dx));
+		// 1. マウスの実際の移動量を計算
+		const mouseDx = _evt.clientX - dragStartX;
+		const mouseDy = _evt.clientY - dragStartY;
+
+		// 2. 【最重要】スケール逆算して、縮小空間内の移動量に変換
+		const dx = mouseDx / scale;
+		const dy = mouseDy / scale;
+
+		// 3. 境界値制限
+		const minX = g_headerObj.playingLayout ? -g_headerObj.scAreaWidth : 0;
+		const newX = Math.max(minX, Math.min(_playW + g_headerObj.scAreaWidth - boundsW, elemStartX + dx));
 		const newY = Math.max(0, Math.min(_playH - boundsH, elemStartY + dy));
 
 		_target.style.left = wUnit(newX);
@@ -9430,11 +9581,13 @@ const makeElementDraggable = (_target, _playW, _playH, _bounds, _onDragEnd) => {
 		const finalX = parseInt(_target.style.left, 10) || 0;
 		const finalY = parseInt(_target.style.top, 10) || 0;
 
-		// 外部の保存処理などを実行
-		if (typeof _onDragEnd === `function`) {
-			_onDragEnd(finalX, finalY);
+		if (g_previewPos[_key]) {
+			g_previewPos[_key].x = finalX;
+			g_previewPos[_key].y = finalY;
+		}
+		if (_config) {
+			applyElementPositionToGame(finalX, finalY, _config, _key);
 		}
-
 		_evt.stopPropagation();
 	});
 
@@ -9452,7 +9605,7 @@ const makeElementDraggable = (_target, _playW, _playH, _bounds, _onDragEnd) => {
 /**
  * ドラッグ可能な判定グループを生成する
  * @param {HTMLElement} _parent    親要素
- * @param {string}      _groupId   `jdgJ` または `jdgFJ`
+ * @param {string}      _groupId   `arrowJdg` または `frzJdg`
  * @param {number}      _initX     初期X座標（frame相対）
  * @param {number}      _initY     初期Y座標（frame相対）
  * @param {number}      _playW     プレイ幅
@@ -9464,8 +9617,9 @@ const buildDraggableJudgGroup = (_parent, _groupId, _initX, _initY, _playW, _pla
 	const groupH = 51;
 
 	const group = createEmptySprite(_parent, `previewGrp_${_groupId}`, {
-		x: _initX, y: _initY, w: groupW, h: groupH, cursor: `grab`, pointerEvents: C_DIS_AUTO,
+		x: _initX, y: _initY, w: groupW, h: groupH, pointerEvents: C_DIS_AUTO,
 	});
+	const opacity = g_stateObj.opacity / 100;
 
 	// 内包要素の生成 (省略：元のコードの multiAppend 部分と同一)
 	multiAppend(
@@ -9473,62 +9627,38 @@ const buildDraggableJudgGroup = (_parent, _groupId, _initX, _initY, _playW, _pla
 		// キャラクタ
 		createDivCss2Label(`previewChara_${_groupId}`, _opts.charaText, {
 			x: 0, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.jdgCharaSiz, color: _opts.charaColor,
-		}),
+			siz: g_limitObj.jdgCharaSiz, opacity,
+		}, _groupId === `arrowJdg` ? g_cssObj.common_ii : g_cssObj.common_kita),
 		// コンボ
 		createDivCss2Label(`previewCombo_${_groupId}`, _opts.comboText, {
 			x: 170, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.jdgCharaSiz, color: `#ffffff`,
-		}),
+			siz: g_limitObj.jdgCharaSiz, opacity,
+		}, _groupId === `arrowJdg` ? g_cssObj.common_kita : g_cssObj.common_ii),
 		// Fast/Slow
 		createDivCss2Label(`previewDiff_${_groupId}`, _opts.diffText, {
 			x: 170, y: 25, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.mainSiz, color: `#ff9966`,
-		}),
+			siz: g_limitObj.mainSiz, color: `#ff9966`, opacity,
+		}, g_cssObj.common_fast),
 	);
 
-	// ドラッグハンドル（薄い枠）
-	createEmptySprite(group, `lblHandle_${_groupId}`, {
-		x: 0, y: 0, w: groupW, h: groupH, border: `1px dashed rgba(255,255,255,0.3)`,
-		boxSizing: `border-box`, borderRadius: `2px`, background: `rgba(255,255,255,0.04)`,
-	});
-
 	// ============================================================
 	// 判定グループ固有の「座標反映ルール」を定義
 	// ============================================================
 	const configMap = {
-		jdgJ: {
+		arrowJdg: {
 			toastTitle: g_lblNameObj.arrowJdgUpdate,
 			getStdX: (pw) => Math.round(pw / 2 - 220),
 			getStdY: (ph, syr) => Math.round((ph + syr) / 2 - 60),
-			saveCallback: (dx, dy) => {
-				g_diffObj.arrowJdgX = dx;
-				g_diffObj.arrowJdgY = dy;
-			}
 		},
-		jdgFJ: {
+		frzJdg: {
 			toastTitle: g_lblNameObj.frzJdgUpdate,
 			getStdX: (pw) => Math.round(pw / 2 - 120),
 			getStdY: (ph, syr) => Math.round((ph + syr) / 2 + 10),
-			saveCallback: (dx, dy) => {
-				g_diffObj.frzJdgX = dx;
-				g_diffObj.frzJdgY = dy;
-			}
 		}
 	};
 
-	// 汎用関数を呼び出し、判定位置特有の処理をコールバックとして渡す
-	makeElementDraggable(group, _playW, _playH, { w: groupW, h: groupH }, (finalX, finalY) => {
-		// グローバルなプレビュー座標を更新
-		g_previewPos[_groupId].x = finalX;
-		g_previewPos[_groupId].y = finalY;
-
-		// 設定マップから該当するルールを適用して保存
-		const currentConfig = configMap[_groupId];
-		if (currentConfig) {
-			applyElementPositionToGame(finalX, finalY, currentConfig);
-		}
-	});
+	// 汎用ドラッグ及びドラッグ枠作成、差分適用処理
+	makeElementDraggable(group, _groupId, _playW, _playH, { w: groupW, h: groupH }, configMap[_groupId]);
 };
 
 /**
@@ -9536,8 +9666,9 @@ const buildDraggableJudgGroup = (_parent, _groupId, _initX, _initY, _playW, _pla
  * @param {number} _x 確定したframe相対X
  * @param {number} _y 確定したframe相対Y
  * @param {object} _config 反映用の設定オブジェクト
+ * @param {string} _key 保存用キー(g_diffObjのプロパティ名の接頭辞)
  */
-const applyElementPositionToGame = (_x, _y, _config) => {
+const applyElementPositionToGame = (_x, _y, _config, _key) => {
 	const playW = g_headerObj.playingWidth || g_sWidth;
 	const playH = g_headerObj.playingHeight || g_sHeight;
 	const stepYR = g_posObj?.stepYR ?? 0;
@@ -9551,7 +9682,10 @@ const applyElementPositionToGame = (_x, _y, _config) => {
 	const diffY = _y - stdY;
 
 	// 3. 指定された保存先にオフセットを格納
-	_config.saveCallback(diffX, diffY);
+	g_diffObj[`${_key}X`] = diffX;
+	g_diffObj[`${_key}Y`] = diffY;
+	g_localStorage[`${_key}X`] = diffX;
+	g_localStorage[`${_key}Y`] = diffY;
 
 	// 4. トースト表示 (通知が不要な要素なら省略可能にする)
 	if (_config.toastTitle) {
@@ -9733,6 +9867,7 @@ const createSettingsDisplayWindow = _sprite => {
 	createGeneralSetting(spriteList.hitPosition, `hitPosition`, {
 		skipTerms: g_settings.hitPositionTerms, scLabel: g_lblNameObj.sc_hitPosition, roundNum: 5,
 		unitName: g_lblNameObj.pixel,
+		addRFunc: () => updatePreviewHitPositionLine(g_stateObj.hitPosition),
 	});
 };
 
@@ -13897,6 +14032,9 @@ const getArrowSettings = () => {
 	if (g_headerObj.scAreaWidth === 0 && (g_headerObj.keyRetry !== g_headerObj.keyRetryDef2 || g_headerObj.keyTitleBack !== g_headerObj.keyTitleBackDef2)) {
 		g_workObj.nonDefaultSc = false;
 	}
+	if (g_diffObj.shortcutX !== 0 || g_diffObj.shortcutY !== 0) {
+		g_workObj.nonDefaultSc = true;
+	}
 
 	g_workObj.backX = (g_workObj.nonDefaultSc && g_headerObj.playingLayout ? g_headerObj.scAreaWidth : 0);
 	g_workObj.playingX = g_headerObj.playingX + g_workObj.backX;
@@ -14372,12 +14510,28 @@ const mainInit = () => {
 
 	if (g_workObj.nonDefaultSc) {
 		multiAppend(infoSprite,
-			createDivCss2Label(`lblRetry`, `[${g_lblNameObj.l_retry}]`, { ...g_lblPosObj.lblMainScHeader, y: g_headerObj.playingHeight - 65 }),
-			createDivCss2Label(`lblRetrySc`, g_kCd[g_headerObj.keyRetry],
-				{ ...g_lblPosObj.lblMainScKey, y: g_headerObj.playingHeight - 50, fontWeight: g_headerObj.keyRetry === C_KEY_RETRY ? `normal` : `bold` }),
-			createDivCss2Label(`lblTitleBack`, `[${g_lblNameObj.l_titleBack}]`, { ...g_lblPosObj.lblMainScHeader, y: g_headerObj.playingHeight - 35 }),
-			createDivCss2Label(`lblTitleBackSc`, g_isMac ? `Shift+${g_kCd[g_headerObj.keyRetry]}` : g_kCd[g_headerObj.keyTitleBack],
-				{ ...g_lblPosObj.lblMainScKey, y: g_headerObj.playingHeight - 20, fontWeight: g_headerObj.keyTitleBack === C_KEY_TITLEBACK ? `normal` : `bold` }),
+			createDivCss2Label(`lblRetry`, `[${g_lblNameObj.l_retry}]`, {
+				...g_lblPosObj.lblMainScHeader,
+				x: g_sWidth + g_headerObj.scAreaWidth - 85 + g_diffObj.shortcutX,
+				y: g_headerObj.playingHeight - 65 + g_diffObj.shortcutY,
+			}),
+			createDivCss2Label(`lblRetrySc`, g_kCd[g_headerObj.keyRetry], {
+				...g_lblPosObj.lblMainScKey,
+				x: g_sWidth + g_headerObj.scAreaWidth - 85 + g_diffObj.shortcutX,
+				y: g_headerObj.playingHeight - 50 + g_diffObj.shortcutY,
+				fontWeight: g_headerObj.keyRetry === C_KEY_RETRY ? `normal` : `bold`,
+			}),
+			createDivCss2Label(`lblTitleBack`, `[${g_lblNameObj.l_titleBack}]`, {
+				...g_lblPosObj.lblMainScHeader,
+				x: g_sWidth + g_headerObj.scAreaWidth - 85 + g_diffObj.shortcutX,
+				y: g_headerObj.playingHeight - 35 + g_diffObj.shortcutY,
+			}),
+			createDivCss2Label(`lblTitleBackSc`, g_isMac ? `Shift+${g_kCd[g_headerObj.keyRetry]}` : g_kCd[g_headerObj.keyTitleBack], {
+				...g_lblPosObj.lblMainScKey,
+				x: g_sWidth + g_headerObj.scAreaWidth - 85 + g_diffObj.shortcutX,
+				y: g_headerObj.playingHeight - 20 + g_diffObj.shortcutY,
+				fontWeight: g_headerObj.keyTitleBack === C_KEY_TITLEBACK ? `normal` : `bold`,
+			}),
 		);
 	}
 

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/05/30 (v48.2.0)
+ * Revised : 2026/06/02 (v48.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -543,9 +543,15 @@ const updateWindowSiz = () => {
             x: g_btnX() + Math.floor((g_btnWidth() - 80) / 2), y: 3, w: 80, h: 18, siz: 11,
             title: g_msgObj.displayPreview,
         },
+        btnDisplayReset: {
+            x: g_btnX() + g_btnWidth() - 80, y: 3, w: 80, h: 18, siz: 11,
+        },
         lblDisplayPreviewMsg: {
             x: g_btnX(), y: g_sHeight - 40, w: g_btnWidth(), h: 20, siz: 14,
         },
+        lblDisplayPreviewMsg2: {
+            x: g_btnX(), y: g_sHeight - 25, w: g_btnWidth(), h: 20, siz: 14,
+        },
         previewScoreDisabled: {
             x: g_headerObj.playingWidth - 80, y: 20, w: 70, h: 200,
         },
@@ -563,23 +569,25 @@ const updateWindowSiz = () => {
         },
         previewLifeBack: {
             x: 5, y: 50, w: 15, h: g_headerObj.playingHeight - 100,
-            background: `#333333`, border: `1px solid #555555`,
         },
         previewLifeBar: {
             x: 5, y: 50 + (g_headerObj.playingHeight - 100) * 0.3,
-            w: 15, h: (g_headerObj.playingHeight - 100) * 0.7, background: `#006666`,
+            w: 15, h: (g_headerObj.playingHeight - 100) * 0.7,
         },
         previewLifeNum: {
             x: 0, y: 30, w: 70, h: 20,
-            siz: g_limitObj.jdgCntsSiz, color: `#ffffff`, background: `#006666`, align: C_ALIGN_CENTER,
+            siz: g_limitObj.jdgCntsSiz, align: C_ALIGN_CENTER,
         },
         previewFrzLifeBack: {
-            x: 0, y: 50, w: 5, h: g_headerObj.playingHeight - 100,
-            background: `#333333`, border: `1px solid #555555`,
+            x: 0, y: 50, w: 4, h: g_headerObj.playingHeight - 100,
         },
         previewFrzLifeBar: {
             x: 0, y: 50 + (g_headerObj.playingHeight - 100) * 0.7,
-            w: 5, h: (g_headerObj.playingHeight - 100) * 0.3,
+            w: 4, h: (g_headerObj.playingHeight - 100) * 0.3,
+        },
+        previewHitPosText: {
+            w: 60, h: 16, siz: 14, color: `#33aaff`,
+            fontFamily: `monospace`, fontWeight: `bold`,
         },
 
         /** キーコンフィグ画面 */
@@ -1328,7 +1336,8 @@ const g_settings = {
         customKey: 0,
         others: 0,
     },
-    environments: [`adjustment`, `volume`, `colorType`, `appearance`, `opacity`, `hitPosition`],
+    environments: [`adjustment`, `volume`, `colorType`, `appearance`, `opacity`, `hitPosition`,
+        `arrowJdgX`, `arrowJdgY`, `frzJdgX`, `frzJdgY`, `shortcutX`, `shortcutY`],
     keyStorages: [`reverse`, `keyCtrl`, `keyCtrlPtn`, `shuffle`, `color`, `stepRtn`],
     colorStorages: [`setColor`, `setShadowColor`, `frzColor`, `frzShadowColor`],
 
@@ -2331,6 +2340,17 @@ const g_diffObj = {
     frzJdgX: 0,
     arrowJdgY: 0,
     frzJdgY: 0,
+    shortcutX: 0,
+    shortcutY: 0,
+};
+
+const g_diffInitObj = {
+    arrowJdgX: 0,
+    frzJdgX: 0,
+    arrowJdgY: 0,
+    frzJdgY: 0,
+    shortcutX: 0,
+    shortcutY: 0,
 };
 
 // キーコンフィグカーソル
@@ -2982,6 +3002,14 @@ const g_shortcutObj = {
     },
     displayPreview: {
         KeyP: { id: `btnDisplayPreview2` },
+        KeyR: { id: `btnDisplayReset` },
+        ShiftLeft_ArrowDown: { id: `lnkHitPositionR` },
+        ShiftRight_ArrowDown: { id: `lnkHitPositionR` },
+        ArrowDown: { id: `lnkHitPositionRR` },
+        ShiftLeft_ArrowUp: { id: `lnkHitPositionL` },
+        ShiftRight_ArrowUp: { id: `lnkHitPositionL` },
+        ArrowUp: { id: `lnkHitPositionLL` },
+
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
         Enter: { id: `btnPlay` },
@@ -4785,9 +4813,11 @@ const g_lang_lblNameObj = {
         transKeyDesc: `別キーモードではキーコンフィグ、ColorType等は保存されません`,
         colorTypeDesc: `現在のColorTypeの設定では、色変化(Display:Color)は自動的にOFFになります`,
         sdShortcutDesc: `Hid+/Sud+時ショートカット：「pageUp」カバーを上へ / 「pageDown」下へ`,
-        displayPreviewDesc: `判定キャラクタ部分をドラッグで移動するとその位置に補正されます`,
+        displayPreviewDesc: `判定キャラクタ部分、ショートカット表示はドラッグで移動するとその位置に補正されます`,
+        displayPreviewDesc2: `枠外への移動はショートカットがデフォルトと異なるか、位置が通常と異なる場合のみ有効です`,
         arrowJdgUpdate: `矢印判定の座標を更新`,
         frzJdgUpdate: `フリーズアロー判定の座標を更新`,
+        shortcutUpdate: `ショートカット表示の座標を更新`,
         resultImageDesc: `画像を右クリックしてコピーできます`,
 
         s_level: `Level`,
@@ -4845,9 +4875,11 @@ const g_lang_lblNameObj = {
         transKeyDesc: `Key config, Color type, etc. are not saved in another key mode`,
         colorTypeDesc: `With the current ColorType setting, color change (Display:Color) will be automatically turned OFF.`,
         sdShortcutDesc: `When "Hidden+" or "Sudden+" select, "pageUp" cover up / "pageDown" cover down`,
-        displayPreviewDesc: `If you drag the judgment character section, it will be adjusted to that position.`,
+        displayPreviewDesc: `If you drag the judgment character section or shortcut display, it will be adjusted to that position.`,
+        displayPreviewDesc2: `Moving outside the frame is only effective when the shortcut display position differs from the default.`,
         arrowJdgUpdate: `Update the coordinates (arrow)`,
         frzJdgUpdate: `Update the coordinates (freeze)`,
+        shortcutUpdate: `Update the coordinates (shortcut)`,
         resultImageDesc: `You can copy the image by right-clicking on it.`,
 
         s_level: `Level`,
@@ -4911,7 +4943,7 @@ const g_lang_msgObj = {
         github: `Dancing☆Onigiri (CW Edition)のGitHubページへ移動します。`,
         security: `Dancing☆Onigiri (CW Edition)のサポート情報ページへ移動します。`,
 
-        environment: `${g_settings.environments.map(v => toCapitalize(v)).join(`, `)}の設定を初期化します。`,
+        environment: `以下の設定を初期化します。\n  - Adjustment, Volume, ColorType, Appearance, Opacity, HitPosition, 判定キャラクタ位置, ショートカット表示位置`,
         highscores: `全譜面のハイスコアを初期化します。\n個別に初期化したい場合はSettings画面より行ってください。`,
         customKey: `カスタムキーに関する全ての保存データを消去します。\n下記のKeyDataから個別に消去可能できないときに使用してください。`,
         others: `標準以外に関する保存データを消去します。`,
@@ -4993,6 +5025,7 @@ const g_lang_msgObj = {
         opacity: `判定キャラクタ、コンボ数、Fast/Slowの透明度を設定します。`,
         hitPosition: `判定位置にズレを感じる場合、\n数値を変えることで判定の中央位置を1px単位(プラス:手前, マイナス:奥側)で調整することができます。\n早押し・遅押し傾向にある場合に使用します。`,
         displayPreview: `プレイ画面上のオブジェクトの表示状態をプレビューします。\n判定キャラクタ部分をドラッグで移動するとその位置に補正されます。`,
+        displayPreviewResetConfirm: `プレイ画面上のオブジェクトの位置を初期状態に戻します。よろしいですか？`,
 
         colorType: `矢印・フリーズアローの配色セットをあらかじめ定義されたリストから選択できます。\nType1～4選択時は色変化が自動でOFFになり、カラーピッカーから好きな色に変更できます。\n[Type0] グラデーション切替, [Type1～4] デフォルトパターン`,
         imgType: `矢印・フリーズアローなどのオブジェクトの見た目を変更します。`,
@@ -5016,7 +5049,7 @@ const g_lang_msgObj = {
         github: `Go to the GitHub page of Dancing Onigiri "CW Edition".`,
         security: `Go to the support information page for Dancing Onigiri "CW Edition".`,
 
-        environment: `Initialize ${g_settings.environments.map(v => toCapitalize(v)).join(`, `)} settings.`,
+        environment: `Initialize settings below:\n  - Adjustment, Volume, ColorType, Appearance, Opacity, HitPosition, judgment character positions and shortcut display position.`,
         highscores: `Initializes the high score of all charts. \nIf you want to initialize each chart individually, \nplease do so from the Highscore view in the Settings screen.`,
         customKey: `Delete stored data related to all custom keymodes. \nUse this option when you cannot delete individual KeyData from the following KeyData.`,
         others: `Delete non-standard stored data.`,
@@ -5097,6 +5130,7 @@ const g_lang_msgObj = {
         opacity: `Set the transparency of some objects such as judgment, combo counts, fast and slow`,
         hitPosition: `If you feel a discrepancy in the judgment position, \nyou can adjust the center position of the judgment in 1px increments \n (plus: in front, minus: at the back) by changing the numerical value. \nUse this function when there is a tendency to push too fast or too slow.`,
         displayPreview: `Preview the display status of objects on the play screen.\nDragging the judgment character section will adjust it to that position.`,
+        displayPreviewResetConfirm: `Reset the position of objects on the play screen to the initial state. Is it OK?`,
 
         colorType: `Change the color scheme set for arrows and freeze-arrows from the predefined set.\nWhen Type1 to 4 is selected, color change is automatically turned off and can be changed to any color from the color picker.\n[Type0] Switch the sequences color gradations, [Type1～4] default color scheme`,
         imgType: `Change the appearance of sequences.`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "48.2.0",
+  "version": "48.4.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",