bluebey-studio: まつげの角度と位置を調整できるように

まつげの角度（跳ねる向き）と位置（まぶたに沿った位置）を左右の目ごとにスライダーで設定できるようにした。

1 files changed, 17 insertions, 0 deletions

diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index 093386f..9e7a9ac 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -463,6 +463,8 @@ export function buildPanel(app, root) {
         state.face.eyes.right.lidWidth = state.face.eyes.left.lidWidth;
         state.face.eyes.right.lidTilt = state.face.eyes.left.lidTilt;
         state.face.eyes.right.lashes = state.face.eyes.left.lashes;
+        state.face.eyes.right.lashAngle = state.face.eyes.left.lashAngle;
+        state.face.eyes.right.lashPos = state.face.eyes.left.lashPos;
         state.face.eyes.right.white = state.face.eyes.left.white ?? null;
         state.face.eyes.right.highlight = state.face.eyes.left.highlight ?? null;
         state.face.eyes.right.lookX = state.face.eyes.left.lookX;
@@ -604,12 +606,22 @@ export function buildPanel(app, root) {
       value: false,
       onChange: (v) => { write((e) => { e.lashes = v; }); touched(); },
     });
+    const lashAngle = slider({
+      label: 'まつげの角度', min: -80, max: 80, step: 1, value: 0, format: (v) => `${Math.round(v)}°`,
+      onInput: (v) => { write((e) => { e.lashAngle = v; }); touched(); },
+    });
+    const lashPos = slider({
+      label: 'まつげの位置', min: -80, max: 80, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
+      onInput: (v) => { write((e) => { e.lashPos = v; }); touched(); },
+    });
     lidSub.add(lidShape);
     lidSub.add(open);
     lidSub.add(lowerLid);
     lidSub.add(lidWidth);
     lidSub.add(lidTilt);
     lidSub.add(controlRow(null, lashes.el, { wide: true }));
+    lidSub.add(lashAngle);
+    lidSub.add(lashPos);
     group.add(lidSub);
     const openInput = open.el.querySelector('input');
     const lowerLidInput = lowerLid.el.querySelector('input');
@@ -729,6 +741,11 @@ export function buildPanel(app, root) {
       lidWidth.set(e.lidWidth ?? state.face.eyes.lidWidth ?? 14);
       lidTilt.set(e.lidTilt ?? state.face.eyes.lidTilt ?? 0);
       lashes.set((e.lashes ?? state.face.eyes.lashes) === true);
+      const lashesOn = (e.lashes ?? state.face.eyes.lashes) === true;
+      lashAngle.set(e.lashAngle ?? state.face.eyes.lashAngle ?? 0);
+      lashPos.set(e.lashPos ?? state.face.eyes.lashPos ?? 0);
+      lashAngle.el.style.display = lashesOn ? '' : 'none';
+      lashPos.el.style.display = lashesOn ? '' : 'none';
       shape.set(shapeValue);
       heartColor.set(state.face.eyes.heartColor ?? '#e0344f');
       heartColor.el.style.display = shapeValue === 'heart' ? '' : 'none';