Bold inputs when value changes

theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx

@@ -32,7 +32,7 @@ const AddImage = styled.div`
   background-size: 5px 5px;
 `
 
-const InputLabel = styled.label<{empty: boolean}>`
+const InputLabel = styled.label<{empty: boolean; changed: boolean}>`
   position: relative;
   cursor: default;
   box-sizing: border-box;
@@ -43,6 +43,7 @@ const InputLabel = styled.label<{empty: boolean}>`
   justify-content: center;
   align-items: center;
   font-size: 16px;
+  font-weight: ${(props) => (props.changed ? 'bold' : 'normal')};
 
   overflow: hidden;
   color: #ccc;
@@ -138,6 +139,7 @@ function ImagePropEditor({
     <Container empty={empty}>
       <InputLabel
         empty={empty}
+        changed={value !== propConfig.default}
         title={
           empty ? 'Upload image' : `"${value.id}" (Click to upload new image)`
         }

theatre/studio/src/propEditors/simpleEditors/NumberPropEditor.tsx

@@ -22,6 +22,7 @@ function NumberPropEditor({
       temporarilySetValue={editingTools.temporarilySetValue}
       discardTemporaryValue={editingTools.discardTemporaryValue}
       permanentlySetValue={editingTools.permanentlySetValue}
+      defaultValue={propConfig.default}
       range={propConfig.range}
       nudge={nudge}
       autoFocus={autoFocus}

theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx

@@ -37,7 +37,7 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
   border-radius: 99999px;
 `
 
-const HexInput = styled(BasicStringInput)`
+const HexInput = styled(BasicStringInput)<{defaultValue: string}>`
   flex: 1;
 `
 
@@ -61,6 +61,7 @@ const RgbaPopover = styled.div`
 `
 
 function RgbaPropEditor({
+  propConfig,
   editingTools,
   value,
   autoFocus,
@@ -109,6 +110,9 @@ function RgbaPropEditor({
         />
         <HexInput
           value={rgba2hex(value, {removeAlphaIfOpaque: true})}
+          defaultValue={rgba2hex(propConfig.default, {
+            removeAlphaIfOpaque: true,
+          })}
           temporarilySetValue={noop}
           discardTemporaryValue={noop}
           permanentlySetValue={onChange}

theatre/studio/src/propEditors/simpleEditors/StringLiteralPropEditor.tsx

@@ -20,13 +20,15 @@ function StringLiteralPropEditor<TLiteralOptions extends string>({
   return propConfig.as === 'menu' ? (
     <BasicSelect
       value={value}
+      defaultValue={propConfig.default}
       onChange={onChange}
       options={propConfig.valuesAndLabels}
       autoFocus={autoFocus}
     />
   ) : (
     <BasicSwitch
       value={value}
+      defaultValue={propConfig.default}
       onChange={onChange}
       options={propConfig.valuesAndLabels}
       autoFocus={autoFocus}

theatre/studio/src/propEditors/simpleEditors/StringPropEditor.tsx

@@ -4,6 +4,7 @@ import BasicStringInput from '@theatre/studio/uiComponents/form/BasicStringInput
 import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps'
 
 function StringPropEditor({
+  propConfig,
   editingTools,
   value,
   autoFocus,
@@ -14,6 +15,7 @@ function StringPropEditor({
       temporarilySetValue={editingTools.temporarilySetValue}
       discardTemporaryValue={editingTools.discardTemporaryValue}
       permanentlySetValue={editingTools.permanentlySetValue}
+      defaultValue={propConfig.default}
       autoFocus={autoFocus}
     />
   )

theatre/studio/src/uiComponents/form/BasicNumberInput.tsx

@@ -40,7 +40,7 @@ const Container = styled.div`
   }
 `
 
-const Input = styled.input`
+const Input = styled.input<{defaultValue: number}>`
   background: transparent;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, 0.9);
@@ -52,6 +52,8 @@ const Input = styled.input`
   width: 100%;
   height: calc(100% - 4px);
   border-radius: 2px;
+  font-weight: ${(props) =>
+    props.value === props.defaultValue ? 'normal' : 'bold'};
 
   &:focus {
     cursor: text;
@@ -107,6 +109,7 @@ const BasicNumberInput: React.FC<{
   discardTemporaryValue: () => void
   permanentlySetValue: (v: number) => void
   className?: string
+  defaultValue: number
   range?: [min: number, max: number]
   isValid?: (v: number) => boolean
   inputRef?: MutableRefObject<HTMLInputElement | null>
@@ -308,6 +311,7 @@ const BasicNumberInput: React.FC<{
       type="text"
       onChange={callbacks.inputChange}
       value={value}
+      defaultValue={propsA.defaultValue}
       onBlur={callbacks.onBlur}
       onKeyDown={callbacks.onInputKeyDown}
       onClick={callbacks.onClick}

theatre/studio/src/uiComponents/form/BasicSelect.tsx

@@ -20,7 +20,7 @@ const IconContainer = styled.div`
   pointer-events: none;
 `
 
-const Select = styled.select`
+const Select = styled.select<{defaultValue: string}>`
   appearance: none;
   background-color: transparent;
   box-sizing: border-box;
@@ -37,6 +37,8 @@ const Select = styled.select`
   So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
   */
   height: 26px /* calc(100% - 4px); */;
+  font-weight: ${(props) =>
+    props.value === props.defaultValue ? 'normal' : 'bold'};
 
   @supports (-moz-appearance: none) {
     /* Ugly hack to remove the extra left padding that shows up only in Firefox */
@@ -52,12 +54,14 @@ const Select = styled.select`
 
 function BasicSelect<TLiteralOptions extends string>({
   value,
+  defaultValue,
   onChange,
   options,
   className,
   autoFocus,
 }: {
   value: TLiteralOptions
+  defaultValue: TLiteralOptions
   onChange: (val: TLiteralOptions) => void
   options: Record<TLiteralOptions, string>
   className?: string
@@ -75,6 +79,7 @@ function BasicSelect<TLiteralOptions extends string>({
       <Select
         className={className}
         value={value}
+        defaultValue={defaultValue}
         onChange={_onChange}
         autoFocus={autoFocus}
       >

theatre/studio/src/uiComponents/form/BasicStringInput.tsx

@@ -1,12 +1,12 @@
 import styled from 'styled-components'
-import type {MutableRefObject} from 'react';
-import { useEffect} from 'react'
+import type {MutableRefObject} from 'react'
+import {useEffect} from 'react'
 import React, {useMemo, useRef} from 'react'
 import mergeRefs from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 
-const Input = styled.input.attrs({type: 'text'})`
+const Input = styled.input.attrs({type: 'text'})<{defaultValue: string}>`
   background: transparent;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, 0.9);
@@ -20,6 +20,8 @@ const Input = styled.input.attrs({type: 'text'})`
   border-radius: 2px;
   border: 1px solid transparent;
   box-sizing: border-box;
+  font-weight: ${(props) =>
+    props.value === props.defaultValue ? 'normal' : 'bold'};
 
   &:hover {
     background-color: #10101042;
@@ -54,6 +56,7 @@ const alwaysValid = (v: string) => true
 
 const BasicStringInput: React.FC<{
   value: string
+  defaultValue: string
   temporarilySetValue: (v: string) => void
   discardTemporaryValue: () => void
   permanentlySetValue: (v: string) => void
@@ -192,6 +195,7 @@ const BasicStringInput: React.FC<{
       className={`${props.className ?? ''} ${!isValid(value) ? 'invalid' : ''}`}
       onChange={callbacks.inputChange}
       value={value}
+      defaultValue={props.defaultValue}
       onBlur={callbacks.onBlur}
       onKeyDown={callbacks.onInputKeyDown}
       onClick={callbacks.onClick}

theatre/studio/src/uiComponents/form/BasicSwitch.tsx

@@ -44,21 +44,25 @@ const Label = styled.label`
   }
 `
 
-const Input = styled.input`
+const Input = styled.input<{defaultValue: string}>`
   position: absolute;
   opacity: 0;
   pointer-events: none;
   width: 0;
   height: 0;
+  font-weight: ${(props) =>
+    props.value === props.defaultValue ? 'normal' : 'bold'};
 `
 
 function BasicSwitch<TLiteralOptions extends string>({
   value,
+  defaultValue,
   onChange,
   options,
   autoFocus,
 }: {
   value: TLiteralOptions
+  defaultValue: TLiteralOptions
   onChange: (val: TLiteralOptions) => void
   options: Record<TLiteralOptions, string>
   autoFocus?: boolean
@@ -78,6 +82,7 @@ function BasicSwitch<TLiteralOptions extends string>({
             type="radio"
             checked={value === key}
             value={key}
+            defaultValue={defaultValue}
             onChange={_onChange}
             name="switchbox"
             autoFocus={autoFocus}