bluebey-studio: 背景写真に「隠すマスク」を追加

1 files changed, 20 insertions, 0 deletions

diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index a0b2611..69c8454 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -1443,6 +1443,10 @@ export function buildPanel(app, root) {
       const dataUrl = await app.backdrop.loadImageFile(file);
       state.view.backgroundImage = dataUrl;
       state.view.background = 'image';
+      // A mask describes the old photo; keeping it would hide the wrong thing.
+      state.view.occlusionMask = null;
+      state.view.occlusionInverse = null;
+      state.view.occlusionEnabled = false;
       app.actions.refresh('view');
       sync();
       toast(`背景の画像「${file.name}」を読み込みました`);
@@ -1456,6 +1460,19 @@ export function buildPanel(app, root) {
     items: [{ id: 'bgimg', label: '画像を読み込む', onClick: () => { if (confirmImageLicense()) backgroundImagePicker.click(); } }],
   }));
 
+  // "Hide ぶるべー behind this": only meaningful for a user photo, and the
+  // clear button only when a mask exists. Both live in one wrapper so the
+  // syncer can show/hide them together.
+  const occlusionEdit = buttons({
+    items: [{ id: 'mask-edit', label: '隠すマスクを作る', onClick: () => { app.actions.editOcclusionMask(); } }],
+  });
+  const occlusionClear = buttons({
+    items: [{ id: 'mask-clear', label: 'マスクを消す', onClick: () => { app.actions.clearOcclusionMask(); } }],
+  });
+  const occlusionGroup = h('div', { style: { display: 'none' } }, occlusionEdit.el, occlusionClear.el,
+    hint('写真の中の物（木・建物など）をタップすると、その形にぶるべーが隠れます。背景の「合わせ方」や「大きさ」を変えると、マスクの位置がずれます。'));
+  backdropSection.add(occlusionGroup);
+
   const backgroundFitSegment = segmented({
     label: '合わせ方',
     options: [
@@ -2413,6 +2430,9 @@ export function buildPanel(app, root) {
     backgroundBlurSlider.set(state.view?.backgroundBlur ?? 0);
     backgroundDarkenSlider.set(state.view?.backgroundDarken ?? 0);
     backgroundScaleSlider.set(state.view?.backgroundScale ?? 1);
+    const hasOcclusionMask = typeof state.view?.occlusionMask === 'string' && state.view.occlusionMask !== '';
+    occlusionGroup.style.display = background === 'image' ? '' : 'none';
+    occlusionClear.el.style.display = hasOcclusionMask ? '' : 'none';
     cameraFacingSegment.set(state.view?.cameraFacing ?? 'environment');
     cameraMirrorToggle.set(state.view?.cameraMirror === true);
     gyroToggle.set(state.view?.gyro === true);