From e919b23a5960fcb4e3c97419cd63a5639a4664b7 Mon Sep 17 00:00:00 2001 From: Kurogoma Date: Mon, 8 Jan 2024 21:30:20 +0900 Subject: [PATCH] Separate parameter related code to a module --- interactive/src/controlParam/param.ts | 41 +++++++++ interactive/src/controlParam/preset.ts | 94 ++++++++++++++++++++ interactive/src/slim_ui.ts | 118 +------------------------ 3 files changed, 139 insertions(+), 114 deletions(-) create mode 100644 interactive/src/controlParam/param.ts create mode 100644 interactive/src/controlParam/preset.ts diff --git a/interactive/src/controlParam/param.ts b/interactive/src/controlParam/param.ts new file mode 100644 index 0000000..feebd8f --- /dev/null +++ b/interactive/src/controlParam/param.ts @@ -0,0 +1,41 @@ +import type { FontSetting } from "@kurgm/slim-font"; + +export type InputParam = Omit & { + stem_interval: number; +}; + +export const inputParamNames: (keyof InputParam)[] = [ + "weight_x", + "weight_y", + "stem_interval", + "descender", + "ascender", + "xHeight", + "topBearing", + "bottomBearing", +]; + +function limVal( + map: InputParam, + name: keyof InputParam, + lim: number, + isMax = false +) { + map[name] = isMax ? Math.min(map[name], lim) : Math.max(map[name], lim); +} +export function clampInputParam( + { ...map }: InputParam, + name?: keyof InputParam +) { + if (name) limVal(map, name, 1); + if (name === "stem_interval") { + limVal(map, "weight_x", map.stem_interval, true); + } else { + limVal(map, "stem_interval", map.weight_x); + } + const ipdifxy = map.stem_interval + Math.abs(map.weight_x - map.weight_y); + limVal(map, "xHeight", 2 * ipdifxy + map.weight_y); + limVal(map, "ascender", ipdifxy + map.xHeight); + limVal(map, "descender", ipdifxy); + return map; +} diff --git a/interactive/src/controlParam/preset.ts b/interactive/src/controlParam/preset.ts new file mode 100644 index 0000000..d4151d0 --- /dev/null +++ b/interactive/src/controlParam/preset.ts @@ -0,0 +1,94 @@ +import type { InputParam } from "./param"; + +export interface PresetMap { + title: string; + map: Readonly; + imagePosition: readonly [number, number]; +} + +export const presetMaps: readonly Readonly[] = [ + { + title: "Regular", + map: { + weight_x: 60.0, + weight_y: 50.0, + stem_interval: 150.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [0, 0] + }, + { + title: "Light", + map: { + weight_x: 50.0, + weight_y: 30.0, + stem_interval: 150.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [180, 0] + }, + { + title: "Bold", + map: { + weight_x: 90.0, + weight_y: 60.0, + stem_interval: 160.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [0, 150] + }, + { + title: "Contrast", + map: { + weight_x: 60.0, + weight_y: 15.0, + stem_interval: 150.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [180, 150] + }, + { + title: "Condensed", + map: { + weight_x: 60.0, + weight_y: 50.0, + stem_interval: 100.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [0, 300] + }, + { + title: "Medium", + map: { + weight_x: 60.0, + weight_y: 60.0, + stem_interval: 150.0, + descender: 200.0, + ascender: 700.0, + xHeight: 500.0, + topBearing: 100.0, + bottomBearing: 100.0 + }, + imagePosition: [180, 300] + } +]; \ No newline at end of file diff --git a/interactive/src/slim_ui.ts b/interactive/src/slim_ui.ts index 8172506..14511c6 100644 --- a/interactive/src/slim_ui.ts +++ b/interactive/src/slim_ui.ts @@ -1,107 +1,10 @@ -import type { FontSetting } from "@kurgm/slim-font"; - import "./main"; import { setRenderProps } from "./App"; - -type InputParam = Omit & { stem_interval: number; }; - -interface PresetMap { - title: string; - map: Readonly; - imagePosition: [number, number]; -} - -const presetMaps: readonly PresetMap[] = [ - { - title: "Regular", - map: { - weight_x: 60.0, - weight_y: 50.0, - stem_interval: 150.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [0, 0] - }, - { - title: "Light", - map: { - weight_x: 50.0, - weight_y: 30.0, - stem_interval: 150.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [180, 0] - }, - { - title: "Bold", - map: { - weight_x: 90.0, - weight_y: 60.0, - stem_interval: 160.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [0, 150] - }, - { - title: "Contrast", - map: { - weight_x: 60.0, - weight_y: 15.0, - stem_interval: 150.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [180, 150] - }, - { - title: "Condensed", - map: { - weight_x: 60.0, - weight_y: 50.0, - stem_interval: 100.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [0, 300] - }, - { - title: "Medium", - map: { - weight_x: 60.0, - weight_y: 60.0, - stem_interval: 150.0, - descender: 200.0, - ascender: 700.0, - xHeight: 500.0, - topBearing: 100.0, - bottomBearing: 100.0 - }, - imagePosition: [180, 300] - } -]; +import { InputParam, inputParamNames as controlnames } from "./controlParam/param"; +import { presetMaps } from "./controlParam/preset"; +import { clampInputParam } from "./controlParam/param"; const pform = document.getElementById("slim_params") as HTMLFormElement; -const controlnames: (keyof InputParam)[] = [ - "weight_x", "weight_y", "stem_interval", "descender", "ascender", "xHeight", "topBearing", "bottomBearing" -]; const controls: HTMLInputElement[] = []; const controlr: (HTMLInputElement | null)[] = []; const anonchgf = controlchgf_maker(); @@ -131,21 +34,8 @@ function setFormValues(map: InputParam) { rangeInput.value = String(map[controlname]); }); } -function limVal(map: InputParam, name: keyof InputParam, lim: number, isMax = false) { - map[name] = isMax ? Math.min(map[name], lim) : Math.max(map[name], lim); -} function limForm(name?: keyof InputParam) { - const map = getFormValues(); - if (name) limVal(map, name, 1); - if (name === "stem_interval") { - limVal(map, "weight_x", map.stem_interval, true); - } else { - limVal(map, "stem_interval", map.weight_x); - } - const ipdifxy = map.stem_interval + Math.abs(map.weight_x - map.weight_y); - limVal(map, "xHeight", 2 * ipdifxy + map.weight_y); - limVal(map, "ascender", ipdifxy + map.xHeight); - limVal(map, "descender", ipdifxy); + const map = clampInputParam(getFormValues(), name); setFormValues(map); return map; }