diff --git a/src/features/jimaku/components/JimakuArea.tsx b/src/features/jimaku/components/JimakuArea.tsx index 4803a02e..fbbe1639 100644 --- a/src/features/jimaku/components/JimakuArea.tsx +++ b/src/features/jimaku/components/JimakuArea.tsx @@ -98,6 +98,15 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element { const shouldPutIntoLivePlayer = screenStatus !== 'normal' || isTheme + const [ dragState, setDragState ] = useState<{ + x: number, + y: number, + width: string | number, + height: string | number + }>(() => ({ x: 100, y: -300, width: '50%', height: jimakuStyle.backgroundHeight })) + + const rmbState = jimakuStyle.rememberDragState + return ( @@ -114,12 +123,19 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element { minHeight={100} minWidth={200} scale={0.93} - default={{ - x: 100, - y: -300, - width: '50%', - height: jimakuStyle.backgroundHeight, + onDragStop={(e, d) => { + if (!rmbState) return + setDragState(state => ({ ...state, x: d.x, y: d.y })) + }} + onResizeStop={(e, direction, ref, delta, position) => { + if (!rmbState) return + setDragState({ + width: ref.style.width, + height: ref.style.height, + ...position + }) }} + default={dragState} > = { backgroundColor: '#808080', backgroundOpacity: 40, filterUserLevel: 0, - areaDragBoundary: false + areaDragBoundary: false, + rememberDragState: true } function JimakuFragment({ state, useHandler }: StateProxy): JSX.Element { @@ -121,6 +123,12 @@ function JimakuFragment({ state, useHandler }: StateProxy): JSX.El onChange={bool('areaDragBoundary')} value={state.areaDragBoundary} /> + )