デフォルト値の設定のサンプル

apps/mooreseditor/app/components/SchemaEditor/inputs/ArrayInput.tsx

@@ -7,12 +7,13 @@ import { PrimitiveTypeInput } from "./PrimitiveTypeInput";
 type Props = ComponentProps<typeof NumberInput> & {
   propertySchema: ArraySchema,
   value: any,
+  defaultValue?: any,
   onChange(value: any): void;
 }
 
 export const ArrayInput = ({
   propertySchema,
-  value = [],
+  value,
   onChange,
 }: Props) => {
   const add = () => {
@@ -21,6 +22,12 @@ export const ArrayInput = ({
       ''
     ])
   }
+
+  if (!value && propertySchema.default) {
+    onChange(propertySchema.default as any);
+  }
+  value = value ? value : []
+
   return (
     <Stack gap='xs'>
       {value.map((eachValue: any, i: number) => {

apps/mooreseditor/app/components/SchemaEditor/inputs/PrimitiveTypeInput.tsx

@@ -21,10 +21,14 @@ interface Props {
 export function PrimitiveTypeInput({ showLabel = false, property, propertySchema, value, onChange }: Props) {
   const context = useOutletContext<{ master: ReturnType<typeof useMasterDirectory> }>()
   const label = showLabel ? property : undefined
+
+  const defaultValue = propertySchema && 'default' in propertySchema ? propertySchema['default'] : undefined;
   const props = {
     label,
-    value: value ?? (propertySchema && 'default' in propertySchema ? propertySchema['default'] : undefined),
+    value: value,
+    defaultValue: defaultValue
   }
+
   if ('enum' in propertySchema) {
     return <EnumInput {...props} data={propertySchema.enum.map(value => String(value))} onChange={onChange} />
   } else if ('autoGenerated' in propertySchema && propertySchema.autoGenerated) {
@@ -42,13 +46,29 @@ export function PrimitiveTypeInput({ showLabel = false, property, propertySchema
   } else {
     switch (propertySchema.type) {
       case 'integer':
+        if (!props.value && props.defaultValue) {// TODO このデフォルト値はIntegerInputの中に入れたいがやり方が良くわからないのでとりあえずここに書いておく
+          onChange(props.defaultValue as number);
+        }
         return <IntInput {...props} w={160} onChange={onChange} />
+
       case 'number':
+        if (!props.value && props.defaultValue) {// TODO このデフォルト値はNumberInputの中に入れたいがやり方が良くわからないのでとりあえずここに書いておく
+          onChange(props.defaultValue as number);
+        }
         return <NumberInput {...props} w={160} onChange={onChange} />
+
       case 'boolean':
+        if (!props.value && props.defaultValue) {// TODO このデフォルト値はBooleanInputの中に入れたいがやり方が良くわからないのでとりあえずここに書いておく
+          onChange(props.defaultValue as boolean);
+        }
         return <BooleanInput {...props} onChange={onChange} />
+
       case 'string':
+        if (!props.value && props.defaultValue) {// TODO このデフォルト値はStringInputの中に入れたいがやり方が良くわからないのでとりあえずここに書いておく
+          onChange(props.defaultValue as string);
+        }
         return <StringInput {...props} w={160} onChange={e => onChange(e.currentTarget.value)} />
+
       case 'array':
         switch (propertySchema.pattern) {
           case '@vector2':
@@ -64,7 +84,7 @@ export function PrimitiveTypeInput({ showLabel = false, property, propertySchema
           case '@vector4Int':
             return <VectorInput dimensions={4} step={1} {...props} onChange={onChange} />
           default:
-            return <ArrayInput propertySchema={propertySchema} value={value ?? []} label={label} onChange={(values: any) => onChange(values)} />
+            return <ArrayInput propertySchema={propertySchema} value={value} label={label} onChange={(values: any) => onChange(values)} />
         }
       default:
         null

apps/mooreseditor/app/components/SchemaEditor/inputs/VectorInput.tsx

@@ -5,6 +5,7 @@ import { FormWrapper } from '~/components/FormWrapper'
 type Props = ComponentProps<typeof NumberInput> & {
   dimensions: number,
   value: Array<number>,
+  defaultValue?: Array<number>,
   onChange(value: Array<number>): void;
 }
 
@@ -14,7 +15,13 @@ export const VectorInput = ({
   onChange,
   ...props
 }: Props) => {
+
+  if (!props.value && props.defaultValue) {
+    onChange(props.defaultValue);
+  }
+
   const value = props.value ? props.value : new Array(dimensions).fill(null)
+
   return (
     <FormWrapper label={label}>
       <Group gap='xs' styles={{ root: { flexWrap: 'nowrap' } }} w={100 * dimensions}>

apps/mooreseditor/app/schema.ts

@@ -53,26 +53,31 @@ export interface StringSchema {
   format?: string;
   foreignKey?: string;
   enum?: Array<string>;
+  default?: string;
 }
 
 export interface IntegerSchema {
   type: 'integer';
   enum?: Array<number>;
+  default?: number;
 }
 
 export interface FloatSchema {
   type: 'number';
   enum?: Array<number>;
+  default?: number;
 }
 
 export interface BooleanSchema {
   type: 'boolean';
+  default?: boolean;
 }
 
 export interface ArraySchema {
   type: 'array';
   pattern?: string;
   items: Schema;
+  default?: Array<any>;
 }
 
 export const isArraySchema = (schema: Schema): schema is ArraySchema => {