Skip to content

Commit

Permalink
fix(web-server): CollaborativeInputを作り直し。他の人が文字列を編集したときにカーソルの位置が保持されな…
Browse files Browse the repository at this point in the history 
…い問題を修正 (#632)
  • Loading branch information
@kizahasi
kizahasi authored Nov 9, 2024
1 parent 0f3a110 commit cdbf550
Show file tree
Hide file tree
Showing 26 changed files with 396 additions and 1,794 deletions.
3 changes: 0 additions & 3 deletions apps/web-server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"localforage": "^1.10.0",
"moment": "^2.29.1",
"pino": "^9.4.0",
"quill": "^1.3.7",
"re-resizable": "^6.9.1",
"react": "^18.3.1",
"react-dnd": "^16.0.0",
Expand All @@ -72,7 +71,6 @@
"react-draggable": "^4.4.4",
"react-konva": "^18.1.1",
"react-markdown": "^8.0.0",
"react-quilljs": "^1.2.17",
"react-rnd": "^10.3.7",
"react-use": "^17.3.1",
"react-virtuoso": "^4.0.0",
Expand Down Expand Up @@ -105,7 +103,6 @@
"@types/color-name": "1.1.5",
"@types/howler": "2.2.12",
"@types/html-escaper": "3.0.2",
"@types/quill": "2.0.14",
"@types/react": "18.3.12",
"@types/react-color": "3.0.12",
"@types/react-dom": "18.3.1",
Expand Down
7 changes: 2 additions & 5 deletions ...omponents/models/room/Room/subcomponents/components/BoardEditorModal/BoardEditorModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,15 +193,12 @@ export const BoardEditorModal: React.FC = () => {
bufferDuration="default"
size="small"
value={board.name}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
updateBoard(board => {
if (board == null) {
return;
}
board.name = e.currentValue;
board.name = currentValue;
});
}}
/>
Expand Down
11 changes: 4 additions & 7 deletions ...s/models/room/Room/subcomponents/components/CharacterEditorModal/CharacterEditorModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,15 +466,12 @@ export const CharacterEditorModal: React.FC = () => {
bufferDuration="default"
size="small"
value={character.name}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
updateCharacter(character => {
if (character == null) {
return;
}
character.name = e.currentValue;
character.name = currentValue;
});
}}
/>
Expand Down Expand Up @@ -719,12 +716,12 @@ export const CharacterEditorModal: React.FC = () => {
size="small"
bufferDuration="default"
value={character.memo}
onChange={e => {
onChange={currentValue => {
updateCharacter(character => {
if (character == null) {
return;
}
character.memo = e.currentValue;
character.memo = currentValue;
});
}}
/>
Expand Down
7 changes: 2 additions & 5 deletions ...oom/Room/subcomponents/components/CharacterListPanelContent/CharacterListPanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,17 +454,14 @@ const CharacterListTabPane: React.FC<CharacterListTabPaneProps> = ({
bufferDuration="default"
size="small"
value={character.state.name}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
setRoomState(state => {
const targetCharacter =
state.characters?.[character.stateId];
if (targetCharacter == null) {
return;
}
targetCharacter.name = e.currentValue;
targetCharacter.name = currentValue;
});
}}
/>
Expand Down
21 changes: 6 additions & 15 deletions ...ents/components/CharacterParameterNamesEditorModal/CharacterParameterNamesEditorModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,16 +97,13 @@ export const CharacterParameterNamesEditorModal: React.FC = () => {
size="small"
value={state.name}
bufferDuration={200}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
setRoomState(state => {
const targetNumParamName = state.numParamNames?.[key];
if (targetNumParamName == null) {
return;
}
targetNumParamName.name = e.currentValue;
targetNumParamName.name = currentValue;
});
}}
/>
Expand Down Expand Up @@ -152,16 +149,13 @@ export const CharacterParameterNamesEditorModal: React.FC = () => {
size="small"
value={state.name}
bufferDuration={200}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
setRoomState(state => {
const targetBoolParamName = state.boolParamNames?.[key];
if (targetBoolParamName == null) {
return;
}
targetBoolParamName.name = e.currentValue;
targetBoolParamName.name = currentValue;
});
}}
/>
Expand Down Expand Up @@ -207,16 +201,13 @@ export const CharacterParameterNamesEditorModal: React.FC = () => {
size="small"
value={state.name}
bufferDuration={200}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
setRoomState(state => {
const targetStrParamName = state.strParamNames?.[key];
if (targetStrParamName == null) {
return;
}
targetStrParamName.name = e.currentValue;
targetStrParamName.name = currentValue;
});
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion ...om/subcomponents/components/CharacterTagNamesEditorModal/CharacterTagNamesEditorModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const CharacterTagNamesEditorModal: React.FC = () => {
disabled={characterTagName == null}
value={characterTagName ?? ''}
bufferDuration="default"
onChange={({ currentValue }) => {
onChange={currentValue => {
setRoomState(roomState => {
roomState[`characterTag${index}Name`] = currentValue;
});
Expand Down
4 changes: 2 additions & 2 deletions ...ponents/models/room/Room/subcomponents/components/CharacterVarInput/CharacterVarInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ export const CharacterVarInput: React.FC<Props> = ({
bufferDuration="default"
disabled={character == null}
value={character?.privateVarToml ?? ''}
onChange={e => {
onChange={currentValue => {
if (character == null) {
return;
}
onChange(e.currentValue);
onChange(currentValue);
}}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion ...ls/room/Room/subcomponents/components/ChatPalettePanelContent/ChatPalettePanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const ChatPaletteList: React.FC<ChatPaletteListProps> = ({
size="small"
bufferDuration="default"
value={chatPaletteText ?? ''}
onChange={e => onChange(e.currentValue)}
onChange={currentValue => onChange(currentValue)}
/>
);
}
Expand Down
4 changes: 2 additions & 2 deletions ...omponents/models/room/Room/subcomponents/components/ImportBoardModal/ImportBoardModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ export const ImportBoardModal: React.FC = () => {
<CollaborativeInput
multiline
value={value}
onChange={e => {
setValue(e.currentValue);
onChange={currentValue => {
setValue(currentValue);
}}
bufferDuration="short"
placeholder="ここにJSONをペーストしてください。"
Expand Down
4 changes: 2 additions & 2 deletions ...s/models/room/Room/subcomponents/components/ImportCharacterModal/ImportCharacterModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ export const ImportCharacterModal: React.FC = () => {
<CollaborativeInput
multiline
value={value}
onChange={e => {
setValue(e.currentValue);
onChange={currentValue => {
setValue(currentValue);
}}
bufferDuration="short"
placeholder="ここにJSONをペーストしてください。"
Expand Down
8 changes: 4 additions & 4 deletions ...ponents/models/room/Room/subcomponents/components/MemosPanelContent/MemosPanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,11 +160,11 @@ const Memo: React.FC<MemoProps> = ({ memoId, memo }: MemoProps) => {
value={memo.name}
style={{ width: '100%' }}
placeholder="名前"
onChange={e =>
onChange={currentValue =>
setRoomState(prevState => {
const memo = prevState.memos?.[memoId];
if (memo != null) {
memo.name = e.currentValue;
memo.name = currentValue;
}
})
}
Expand All @@ -177,7 +177,7 @@ const Memo: React.FC<MemoProps> = ({ memoId, memo }: MemoProps) => {
bufferDuration="default"
value={memo.text}
placeholder="本文"
onChange={e => {
onChange={currentValue => {
setRoomState(roomState => {
if (roomState.memos == null) {
roomState.memos = {};
Expand All @@ -186,7 +186,7 @@ const Memo: React.FC<MemoProps> = ({ memoId, memo }: MemoProps) => {
if (memo == null) {
return;
}
memo.text = e.currentValue;
memo.text = currentValue;
});
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion .../subcomponents/components/OverriddenParameterNameEditor/OverriddenParameterNameEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const OverriddenParameterNameEditor: React.FC<Props> = ({
size="small"
value={overriddenParameterName ?? ''}
bufferDuration="default"
onChange={({ currentValue }) => {
onChange={currentValue => {
onOverriddenParameterNameChange(currentValue);
}}
/>
Expand Down
7 changes: 2 additions & 5 deletions ...nents/models/room/Room/subcomponents/components/PieceEditorMemoRow/PieceEditorMemoRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,8 @@ export const PieceEditorMemoRow: React.FC<{
size="small"
bufferDuration="default"
value={state ?? ''}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange(e.currentValue);
onChange={currentValue => {
onChange(currentValue);
}}
/>
</TableRow>
Expand Down
7 changes: 2 additions & 5 deletions ...nents/models/room/Room/subcomponents/components/PieceEditorNameRow/PieceEditorNameRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,8 @@ export const PieceEditorNameRow: React.FC<{
bufferDuration="default"
size="small"
value={state ?? ''}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange(e.currentValue);
onChange={currentValue => {
onChange(currentValue);
}}
/>
</TableRow>
Expand Down
2 changes: 1 addition & 1 deletion ...server/src/components/models/room/Room/subcomponents/components/RectEditor/RectEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const NameRow = <T extends BoardPositionState>({ value, onChange }: PropsBase<T>
onChange={e => {
const newValue = produce(value, state => {
// nameがない状態をあらわす値として '' と undefined の2種類が混在するのは後々仕様変更があった際に困るかもしれないため、undefinedで統一させるようにしている
state.name = e.currentValue === '' ? undefined : e.currentValue;
state.name = e === '' ? undefined : e;
});
onChange(newValue);
}}
Expand Down
7 changes: 2 additions & 5 deletions .../room/Room/subcomponents/components/RoomMessagesPanelContent/RoomMessagesPanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,12 +380,9 @@ const ChannelNamesEditor: React.FC<ChannelNameEditorProps> = (props: ChannelName
<CollaborativeInput
bufferDuration="default"
value={publicChannelNames == null ? '' : publicChannelNames[key]}
onChange={e => {
if (e.previousValue === e.currentValue) {
return;
}
onChange={currentValue => {
operateAsStateWithImmer(state => {
state[key] = e.currentValue;
state[key] = currentValue;
});
}}
/>
Expand Down
6 changes: 3 additions & 3 deletions ...s/models/room/Room/subcomponents/components/StringParameterInput/StringParameterInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,14 @@ export const StringParameterInput: React.FC<Props> = ({
bufferDuration="default"
disabled={disabled}
value={parameter?.value ?? ''}
onChange={e => {
onChange={currentValue => {
// valueで??演算子を使用しているため、e.previousValueは使えない。そのため代わりにparameter?.valueを使用している
const previousValue = parameter?.value;

if (previousValue === e.currentValue) {
if (previousValue === currentValue) {
return;
}
const diff2 = nullableTextDiff({ prev: previousValue, next: e.currentValue });
const diff2 = nullableTextDiff({ prev: previousValue, next: currentValue });
const operation: CharacterUpOperation = {
$v: 2,
$r: 1,
Expand Down
2 changes: 1 addition & 1 deletion ...ponents/models/room/Room/subcomponents/components/StringPieceEditor/StringPieceEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const useStringPieceEditor = ({
bufferDuration="default"
size="small"
value={state.value}
onChange={({ currentValue }) => {
onChange={currentValue => {
updateState(state => {
if (state == null) {
return;
Expand Down
34 changes: 34 additions & 0 deletions apps/web-server/src/components/ui/CollaborativeInput/CollaborativeInput.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@

.collaborative-input {
/* Ant Design の Input の色と等しい */
background-color: #141414;
/* Ant Design の Input の色と等しい */
color: rgba(255, 255, 255, 0.85);
border: 1px solid #333;
border-radius: 6px;
}

.collaborative-input:focus {
outline: none;
border: 1px solid #0078d4;
}

.collaborative-input.very-small {
font-size: 0.7rem;
padding: 2px 4px;
}

.collaborative-input.small {
font-size: 0.75rem;
padding: 2px 4px;
}

.collaborative-input.medium {
font-size: 0.8rem;
padding: 4px 8px;
}

.collaborative-input.disabled {
color: gray;
cursor: not-allowed;
}
Loading

0 comments on commit cdbf550

Please sign in to comment.