aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/bluebey-studio/src/panel.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/bluebey-studio/src/panel.js')
-rw-r--r--public/bluebey-studio/src/panel.js149
1 files changed, 91 insertions, 58 deletions
diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index f377d16..b5e4e6e 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -1,6 +1,6 @@
import {
h, section as uiSection, subhead, hint, slider, check, segmented, buttons,
- colorField, xyPad, tailPad, selectField, controlRow, tabs, details, toast, icon,
+ colorField, xyPad, tailPad, selectField, controlRow, tabs, details, toast, icon, svgIcon,
} from './ui.js';
import {
FACE_PRESETS, POSE_PRESETS, THEMES, BUBBLE_STYLES, CAPTION_PRESETS,
@@ -458,6 +458,12 @@ export function buildPanel(app, root) {
state.face.eyes.right.closedLines = state.face.eyes.left.closedLines;
state.face.eyes.right.irisShape = state.face.eyes.left.irisShape;
state.face.eyes.right.shape = state.face.eyes.left.shape;
+ // The lids are per eye now too, so link them along with the rest.
+ state.face.eyes.right.lowerLid = state.face.eyes.left.lowerLid;
+ state.face.eyes.right.lidShape = state.face.eyes.left.lidShape;
+ 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.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;
@@ -512,11 +518,20 @@ export function buildPanel(app, root) {
? eye.highlight === true
: state.face.eyes.highlight !== false);
+ const EYE_ICONS = {
+ both: '<circle cx="7" cy="12" r="3.8"/><circle cx="17" cy="12" r="3.8"/><circle cx="7" cy="12" r="1.3" fill="currentColor" stroke="none"/><circle cx="17" cy="12" r="1.3" fill="currentColor" stroke="none"/>',
+ left: '<path d="M21 12h-4"/><path d="M19 9.5l-2.5 2.5 2.5 2.5"/><circle cx="9" cy="12" r="3.8"/><circle cx="9" cy="12" r="1.3" fill="currentColor" stroke="none"/>',
+ right: '<path d="M3 12h4"/><path d="M5 9.5l2.5 2.5-2.5 2.5"/><circle cx="15" cy="12" r="3.8"/><circle cx="15" cy="12" r="1.3" fill="currentColor" stroke="none"/>',
+ lid: '<path d="M3 14c2.5-6.5 15.5-6.5 18 0"/><path d="M6 16v3M12 16v3M18 16v3"/>',
+ };
// Each eye group carries the same controls. Linked, one group ("両目") drives
// both eyes; unlinked, a group per eye appears and the gaze pad doubles.
- const eyeGroup = (title) => {
+ const eyeGroup = (title, icon = null) => {
const body = h('div', { class: 'eye-group-body' });
- const el = h('div', { class: 'eye-group' }, h('div', { class: 'eye-group-head', text: title }), body);
+ const head = h('div', { class: 'eye-group-head' },
+ icon ? svgIcon(EYE_ICONS[icon] ?? '') : null,
+ h('span', { text: title }));
+ const el = h('div', { class: 'eye-group' }, head, body);
return {
el,
add: (child) => (body.append(child?.el ?? child), child),
@@ -529,7 +544,65 @@ export function buildPanel(app, root) {
const primary = keys[0];
const write = (fn) => { for (const k of keys) fn(state.face.eyes[k]); };
const touched = () => { app.actions.refresh('face'); sync(); };
- const group = eyeGroup(mode === 'both' ? '両目' : (mode === 'left' ? '左の目' : '右の目'));
+ const group = eyeGroup(mode === 'both' ? '両目' : (mode === 'left' ? '左の目' : '右の目'), mode);
+
+ // --- まぶた (per eye) ------------------------------------------------
+ // 上まぶたの高さ and 下まぶたの高さ share one opening, so each is held to the
+ // other: the lower lid cannot rise past the upper, and the upper cannot drop
+ // below the lower. The sliders' own limits are kept in step in `syncOne`.
+ const lidSub = eyeGroup('まぶた', 'lid');
+ const open = slider({
+ label: '上まぶたの高さ', min: 0, max: 1, step: 0.01, value: 1,
+ format: (v) => (v < 0.02 ? '閉じ' : v > 0.98 ? '開き' : `${Math.round(v * 100)}%`),
+ onInput: (v) => {
+ const floor = state.face.eyes[primary].lowerLid ?? state.face.eyes.lowerLid ?? 0;
+ const vv = Math.max(v, floor);
+ write((e) => { e.open = vv; });
+ if (vv !== v) open.set(vv);
+ touched();
+ },
+ });
+ const lowerLid = slider({
+ label: '下まぶたの高さ', min: 0, max: 1, step: 0.01, value: 0, format: (v) => v.toFixed(2),
+ onInput: (v) => {
+ const ceil = state.face.eyes[primary].open ?? 1;
+ const vv = Math.min(v, ceil);
+ write((e) => { e.lowerLid = vv; });
+ if (vv !== v) lowerLid.set(vv);
+ touched();
+ },
+ });
+ const lidShape = segmented({
+ label: 'まぶたの形',
+ options: [
+ { value: 'curve', label: '曲線' },
+ { value: 'flat', label: '直線（平ら）' },
+ ],
+ value: 'curve',
+ onChange: (v) => { write((e) => { e.lidShape = v; }); touched(); },
+ });
+ const lidWidth = slider({
+ label: 'まぶたの太さ', min: 0, max: 30, step: 1, value: 14, format: (v) => `${Math.round(v)}`,
+ onInput: (v) => { write((e) => { e.lidWidth = v; }); touched(); },
+ });
+ const lidTilt = slider({
+ label: 'まぶたの傾き', min: -40, max: 40, step: 1, value: 0, format: (v) => `${Math.round(v)}°`,
+ onInput: (v) => { write((e) => { e.lidTilt = v; }); touched(); },
+ });
+ const lashes = check({
+ label: 'まつげをつける',
+ value: false,
+ onChange: (v) => { write((e) => { e.lashes = 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 }));
+ group.add(lidSub);
+ const openInput = open.el.querySelector('input');
+ const lowerLidInput = lowerLid.el.querySelector('input');
// 目の形: the artwork the eye shows. A shut shape is drawn with the lids open,
// so 上まぶたの高さ can then be lowered onto it.
@@ -634,6 +707,18 @@ export function buildPanel(app, root) {
const syncOne = () => {
const e = state.face.eyes[primary];
const shapeValue = eyeShapeOf(e);
+ const lower = e.lowerLid ?? state.face.eyes.lowerLid ?? 0;
+ const upper = e.open ?? 1;
+ // Keep each lid's slider range from crossing the other before applying the
+ // values, so the displayed thumb cannot sit past the other lid either.
+ if (openInput) openInput.min = String(Math.min(lower, upper));
+ if (lowerLidInput) lowerLidInput.max = String(Math.max(lower, upper));
+ open.set(upper);
+ lowerLid.set(lower);
+ lidShape.set(e.lidShape ?? state.face.eyes.lidShape ?? 'curve');
+ 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);
shape.set(shapeValue);
heartColor.set(state.face.eyes.heartColor ?? '#e0344f');
heartColor.el.style.display = shapeValue === 'heart' ? '' : 'none';
@@ -660,53 +745,7 @@ export function buildPanel(app, root) {
const leftControls = makeEyeControls('left');
const rightControls = makeEyeControls('right');
- // --- まぶた (whole-face lid settings, shown above the per-eye groups) -------
- const lidGroup = eyeGroup('まぶた');
- const lidShapeSegment = segmented({
- label: 'まぶたの形',
- options: [
- { value: 'curve', label: '曲線' },
- { value: 'flat', label: '直線（平ら）' },
- ],
- value: 'curve',
- onChange: (value) => { state.face.eyes.lidShape = value; app.actions.refresh('face'); },
- });
- // The lid heights write both eyes together: they live in the まぶた group, which
- // is shared, while 目の形 and the rest stay per eye below.
- const setBothEyes = (patch) => { for (const k of ['left', 'right']) Object.assign(state.face.eyes[k], patch); };
- const lidOpenSlider = slider({
- label: '上まぶたの高さ', min: 0, max: 1, step: 0.01, value: 1,
- format: (v) => (v < 0.02 ? '閉じ' : v > 0.98 ? '開き' : `${Math.round(v * 100)}%`),
- onInput: (v) => { setBothEyes({ open: v }); app.actions.refresh('face'); },
- });
- const lidLowerSlider = slider({
- label: '下まぶたの高さ', min: 0, max: 1, step: 0.01, value: 0, format: (v) => v.toFixed(2),
- onInput: (v) => { setBothEyes({ lowerLid: v }); app.actions.refresh('face'); },
- });
- const lidWidthSlider = slider({
- label: 'まぶたの太さ', min: 0, max: 30, step: 1, value: 14, format: (v) => `${Math.round(v)}`,
- onInput: (value) => { state.face.eyes.lidWidth = 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'); },
- });
- const lashesToggle = check({
- label: 'まつげをつける',
- value: false,
- onChange: (v) => { state.face.eyes.lashes = v; app.actions.refresh('face'); },
- });
- lidGroup.add(lidShapeSegment.el);
- lidGroup.add(lidOpenSlider.el);
- lidGroup.add(lidLowerSlider.el);
- lidGroup.add(lidWidthSlider.el);
- lidGroup.add(lidTiltSlider.el);
- lidGroup.add(controlRow(null, lashesToggle.el, { wide: true }));
- lidGroup.add(hint('「直線（平ら）」にすると、まぶたが平らに下りてきます。'
- + '「まぶたの傾き」で、細めた目を左右反転で傾けられます。'));
-
faceSection.add(controlRow(null, linkedToggle.el, { wide: true }));
- faceSection.add(lidGroup);
faceSection.add(bothControls.group);
faceSection.add(leftControls.group);
faceSection.add(rightControls.group);
@@ -741,8 +780,8 @@ export function buildPanel(app, root) {
}],
}));
- faceSection.add(hint('「まぶた」は両目で共通です。「左右を連動させる」を入れると「両目」の設定が1つだけ出て、'
- + '目の形・大きさ・白目・光彩・目線が両目でそろいます。'
+ faceSection.add(hint('「まぶた」は目のグループごとに設定できます。「左右を連動させる」を入れると「両目」の設定が1つだけ出て、'
+ + 'まぶた・目の形・大きさ・白目・光彩・目線が両目でそろいます。'
+ 'はずすと「左の目」「右の目」の設定がそれぞれに出て、目線のパッドも2つになります。'));
const eyeColors = {
@@ -2774,12 +2813,6 @@ export function buildPanel(app, root) {
w.eyeX.set(eye.eyeX ?? 0);
}
- lidWidthSlider.set(state.face.eyes.lidWidth ?? 14);
- lidShapeSegment.set(state.face.eyes.lidShape ?? 'curve');
- lidTiltSlider.set(state.face.eyes.lidTilt ?? 0);
- lidOpenSlider.set(state.face.eyes.left.open ?? 1);
- lidLowerSlider.set(state.face.eyes.left.lowerLid ?? state.face.eyes.lowerLid ?? 0);
- lashesToggle.set(state.face.eyes.lashes === true);
browToggle.set(state.face.eyes.brow.enabled);
browSliders.angle.set(state.face.eyes.brow.angle);
browSliders.height.set(state.face.eyes.brow.height);
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-08 06:45:34 +0000