diff --git a/docs/backlog.md b/docs/backlog.md index 12e7982..77416a3 100644 --- a/docs/backlog.md +++ b/docs/backlog.md @@ -135,6 +135,8 @@ ## UI и качество +- [ ] split to parts - посмотреть вариант с toggle component - может будет + удобнее чем sectioned buttons - [ ] неудобно настраивать ползунками, некоторые инструменты удобнее настроить через drag-n-drop. звучит сложно, но надо придумать процесс - [ ] просмотр картинки в оригинальном размере, и возможно с зумом отдельных diff --git a/web/src/lib/components/fields/schema/SegmentedControl.svelte b/web/src/lib/components/fields/schema/SegmentedControl.svelte new file mode 100644 index 0000000..b314121 --- /dev/null +++ b/web/src/lib/components/fields/schema/SegmentedControl.svelte @@ -0,0 +1,33 @@ + + + + onchange?.(v)} /> + diff --git a/web/src/lib/components/schema/SchemaFields.svelte b/web/src/lib/components/schema/SchemaFields.svelte index bb399ba..fde8c1a 100644 --- a/web/src/lib/components/schema/SchemaFields.svelte +++ b/web/src/lib/components/schema/SchemaFields.svelte @@ -18,6 +18,7 @@ import ColorsControl from "$lib/components/fields/schema/ColorsControl.svelte"; import RangeControl from "$lib/components/fields/schema/RangeControl.svelte"; import SelectControl from "$lib/components/fields/schema/SelectControl.svelte"; + import SegmentedControl from "$lib/components/fields/schema/SegmentedControl.svelte"; import TextControl from "$lib/components/fields/schema/TextControl.svelte"; import OffsetControl from "$lib/components/fields/schema/OffsetControl.svelte"; import PositionControl from "$lib/components/fields/schema/PositionControl.svelte"; @@ -42,6 +43,7 @@ "color-pair": ColorPairControl, colors: ColorsControl, select: SelectControl, + segmented: SegmentedControl, checkbox: CheckboxControl, text: TextControl, dimension: DimensionField, diff --git a/web/src/lib/i18n/tools-i18n.test.ts b/web/src/lib/i18n/tools-i18n.test.ts index 609bee2..e8a03ea 100644 --- a/web/src/lib/i18n/tools-i18n.test.ts +++ b/web/src/lib/i18n/tools-i18n.test.ts @@ -25,7 +25,7 @@ function selectOptions( const spec = ( field as { spec?: { kind?: string; options?: SelectOption[] } } ).spec; - if (spec?.kind !== "select") continue; + if (spec?.kind !== "select" && spec?.kind !== "segmented") continue; for (const option of spec.options ?? []) result.push({ fieldId, option }); } return result; diff --git a/web/src/lib/registry-schema.ts b/web/src/lib/registry-schema.ts index 792b0e9..dfd2a01 100644 --- a/web/src/lib/registry-schema.ts +++ b/web/src/lib/registry-schema.ts @@ -50,6 +50,15 @@ export interface SelectSpec extends FieldSpecBase { options: { value: V; label: string }[]; } +/** То же, что select, но рендерится кнопками-сегментами (выбор в 1 клик). */ +export interface SegmentedSpec< + V extends string = string, +> extends FieldSpecBase { + kind: "segmented"; + default: V; + options: { value: V; label: string }[]; +} + export interface TextSpec extends FieldSpecBase { kind: "text"; default: string; @@ -214,6 +223,7 @@ export const fieldSpecs = { slider: {} as SliderSpec, color: {} as ColorSpec, select: {} as SelectSpec, + segmented: {} as SegmentedSpec, text: {} as TextSpec, checkbox: {} as CheckboxSpec, dimension: {} as DimensionSpec, @@ -277,6 +287,11 @@ export const field = { select: (s: Omit, "kind">): Field => ({ spec: { kind: "select", ...s }, }), + segmented: ( + s: Omit, "kind">, + ): Field => ({ + spec: { kind: "segmented", ...s }, + }), text: (s: Omit): Field => ({ spec: { kind: "text", ...s }, }), @@ -576,6 +591,7 @@ export function sanitizeSchemaParams

( break; } case "select": + case "segmented": out[key] = typeof raw === "string" && spec.options.some((o) => o.value === raw) ? raw diff --git a/web/src/lib/registry/tools/geometry.ts b/web/src/lib/registry/tools/geometry.ts index 08b9e1f..c4774c1 100644 --- a/web/src/lib/registry/tools/geometry.ts +++ b/web/src/lib/registry/tools/geometry.ts @@ -446,7 +446,7 @@ interface SplitPartsParams { export const splitPartsSchema = toolSchema( { - mode: field.select({ + mode: field.segmented({ label: "fields.splitMode", default: "grid", options: [