bluebey-studio: 上まぶたと下まぶたを独立させ、まぶた設定を目メニューに移設

上まぶたの高さが下まぶたの高さに引きずられる挙動を解消。目を細めるボタンを廃止し、まぶたの形・傾きを目の形の上へ移動。白目を出すときの形のサイズ上限を撤廃し、既定で白目に収まるようにした。

1 files changed, 23 insertions, 56 deletions

diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index 9913982..2809269 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -531,6 +531,21 @@ export function buildPanel(app, root) {
       label: '下まぶたの高さ', min: 0, max: 1, step: 0.01, value: 0, format: (v) => v.toFixed(2),
       onInput: (v) => { write((e) => { e.lowerLid = v; }); touched(); },
     });
+    // まぶたの形 and tilt are whole-face settings (the drawing mirrors the tilt
+    // between the eyes), so every group shows the same pair, right above 目の形.
+    const lidShape = segmented({
+      label: 'まぶたの形',
+      options: [
+        { value: 'curve', label: '曲線' },
+        { value: 'flat', label: '直線（平ら）' },
+      ],
+      value: 'curve',
+      onChange: (value) => { state.face.eyes.lidShape = value; touched(); },
+    });
+    const lidTilt = slider({
+      label: 'まぶたの傾き', min: -40, max: 40, step: 1, value: 0, format: (v) => `${Math.round(v)}°`,
+      onInput: (value) => { state.face.eyes.lidTilt = value; touched(); },
+    });
     const shape = segmented({
       label: '目の形',
       options: [
@@ -618,6 +633,8 @@ export function buildPanel(app, root) {
 
     group.add(open);
     group.add(lowerLid);
+    group.add(lidShape);
+    group.add(lidTilt);
     group.add(shape);
     group.add(shapeScale);
     group.add(closedLines);
@@ -637,6 +654,8 @@ export function buildPanel(app, root) {
       const shapeValue = eyeShapeOf(e);
       open.set(e.open);
       lowerLid.set(e.lowerLid ?? state.face.eyes.lowerLid ?? 0);
+      lidShape.set(state.face.eyes.lidShape ?? 'curve');
+      lidTilt.set(state.face.eyes.lidTilt ?? 0);
       shape.set(shapeValue);
       shapeScale.set(e.shapeScale ?? 1);
       closedLines.set(String(e.closedLines ?? 1));
@@ -667,6 +686,8 @@ export function buildPanel(app, root) {
   faceSection.add(bothControls.group);
   faceSection.add(leftControls.group);
   faceSection.add(rightControls.group);
+  faceSection.add(hint('「まぶたの形」を「直線（平ら）」にすると、まぶたが平らに下りてきます。'
+    + '「まぶたの傾き」で、細めた目を左右反転で傾けられます。'));
 
   // 横位置 (per eye) rarely changes, so it lives in こまかい設定.
   const eyeAdvancedWidgets = {};
@@ -680,58 +701,6 @@ export function buildPanel(app, root) {
     tearWidgets.push(eyeX.el);
   }
 
-  // 目を細める (and its undo) grouped with the lid shape and tilt that shape the
-  // squint. It sits right under the lid-height sliders it drives.
-  const squintGroup = eyeGroup('目を細める');
-  squintGroup.add(buttons({
-    items: [
-      {
-        id: 'squint',
-        label: '目を細める',
-        onClick: () => {
-          // The upper lid comes partway down and the lower lid rises to meet it.
-          // Both lids are per eye, so both eyes are set here.
-          state.face.eyes.left.open = 0.5;
-          state.face.eyes.right.open = 0.5;
-          state.face.eyes.left.lowerLid = 0.5;
-          state.face.eyes.right.lowerLid = 0.5;
-          app.actions.refresh('face');
-          sync();
-        },
-      },
-      {
-        id: 'unsquint',
-        label: '目を細めない',
-        onClick: () => {
-          state.face.eyes.left.open = 1;
-          state.face.eyes.right.open = 1;
-          state.face.eyes.left.lowerLid = 0;
-          state.face.eyes.right.lowerLid = 0;
-          app.actions.refresh('face');
-          sync();
-        },
-      },
-    ],
-  }));
-  const lidShapeSegment = segmented({
-    label: 'まぶたの形',
-    options: [
-      { value: 'curve', label: '曲線' },
-      { value: 'flat', label: '直線（平ら）' },
-    ],
-    value: 'curve',
-    onChange: (value) => { state.face.eyes.lidShape = value; app.actions.refresh('face'); },
-  });
-  const lidTiltSlider = slider({
-    label: 'まぶたの傾き', min: -40, max: 40, step: 1, value: 0, format: (v) => `${Math.round(v)}°`,
-    onInput: (value) => { state.face.eyes.lidTilt = value; app.actions.refresh('face'); },
-  });
-  squintGroup.add(lidShapeSegment.el);
-  squintGroup.add(lidTiltSlider.el);
-  squintGroup.add(hint('「まぶたの形」を「直線」にすると、まぶたが平らに下りてきます。'
-    + '「まぶたの傾き」で、細めた目を左右反転で傾けられます。'));
-  faceSection.add(squintGroup);
-
   // One button to put every eye setting back to the artwork's defaults. The
   // artwork *source* is kept: resetting the numbers should not throw away a
   // hand-drawn image the user loaded.
@@ -748,7 +717,7 @@ export function buildPanel(app, root) {
     }],
   }));
 
-  faceSection.add(hint('「左右を連動させる」を入れると「両目」の設定が1つだけ出て、上まぶた・下まぶた・形・白目・光彩・目線が両目でそろいます。'
+  faceSection.add(hint('「左右を連動させる」を入れると「両目」の設定が1つだけ出て、上まぶた・下まぶた・まぶたの形・形・白目・光彩・目線が両目でそろいます。'
     + 'はずすと「左の目」「右の目」の設定がそれぞれに出て、目線のパッドも2つになります。'));
 
   const eyeAdvanced = details(faceSection.body, 'こまかい設定（瞳・色・まぶたの太さ・左右べつの設定・手描き）');
@@ -768,7 +737,7 @@ export function buildPanel(app, root) {
   eyeAdvanced.add(irisScaleSlider.el);
   eyeAdvanced.add(heartColorField.el);
   eyeAdvanced.add(lidWidthSlider.el);
-  eyeAdvanced.add(hint('「まぶたの形」「まぶたの傾き」「目を細める」「白目」「光彩」は、この上の「目」にあります。'
+  eyeAdvanced.add(hint('「まぶたの形」「まぶたの傾き」「白目」「光彩」は、この上の「目」にあります。'
     + 'ハートの大きさは「瞳の大きさ」で変わります。'));
 
   const eyeColors = {
@@ -2801,8 +2770,6 @@ export function buildPanel(app, root) {
     irisScaleSlider.set(state.face.eyes.irisScale);
     heartColorField.set(state.face.eyes.heartColor ?? '#e0344f');
     lidWidthSlider.set(state.face.eyes.lidWidth ?? 14);
-    lidShapeSegment.set(state.face.eyes.lidShape ?? 'curve');
-    lidTiltSlider.set(state.face.eyes.lidTilt ?? 0);
     browToggle.set(state.face.eyes.brow.enabled);
     browSliders.angle.set(state.face.eyes.brow.angle);
     browSliders.height.set(state.face.eyes.brow.height);