From d7bb826e48349a66db4fd7d9d0ce020ea586a54d Mon Sep 17 00:00:00 2001 From: Matthias Lehner Date: Mon, 9 Oct 2023 02:37:23 +0900 Subject: [PATCH] Resolve PR comments --- public/styles.css | 5 ++ src/main/components/canvas/editor.tsx | 88 +++++++------------ src/main/components/canvas/zoom-pane.tsx | 2 +- .../__snapshots__/update-pane-test.tsx.snap | 18 ++-- 4 files changed, 46 insertions(+), 67 deletions(-) diff --git a/public/styles.css b/public/styles.css index 5be24bba..479965b2 100644 --- a/public/styles.css +++ b/public/styles.css @@ -167,6 +167,11 @@ button:active { .button-rounded { border-radius: 0.25rem; + width: 2.25em; + height: 2.25em; + display: flex; + align-items: center; + justify-content: center; } .switch button { diff --git a/src/main/components/canvas/editor.tsx b/src/main/components/canvas/editor.tsx index d55fdd7c..a298a0ac 100644 --- a/src/main/components/canvas/editor.tsx +++ b/src/main/components/canvas/editor.tsx @@ -16,21 +16,21 @@ const grid: number = 10; const subdivisions: number = 5; const borderWidth: number = 1; -const StyledEditor = styled.div<{ zoomFactor: number }>` +const StyledEditor = styled.div<{ scale: number }>` display: block; overflow: auto; - + position: relative; min-height: inherit; max-height: inherit; - width: ${(props) => clamp(100 / props.zoomFactor, 100, 100 / minScale)}%; - height: ${(props) => clamp(100 / props.zoomFactor, 100, 100 / minScale)}%; + width: ${(props) => clamp(100 / props.scale, 100, 100 / minScale)}%; + height: ${(props) => clamp(100 / props.scale, 100, 100 / minScale)}%; -ms-overflow-style: -ms-autohiding-scrollbar; border: ${borderWidth}px solid ${(props) => props.theme.color.gray}; background-position: calc(50% + ${(grid * subdivisions - borderWidth) / 2}px) - calc(50% + ${(grid * subdivisions - borderWidth) / 2}px); + calc(50% + ${(grid * subdivisions - borderWidth) / 2}px); background-size: ${grid * subdivisions}px ${grid * subdivisions}px, ${grid * subdivisions}px ${grid * subdivisions}px, @@ -42,14 +42,17 @@ const StyledEditor = styled.div<{ zoomFactor: number }>` linear-gradient(to bottom, ${(props) => props.theme.color.gray} 1px, transparent 1px); background-repeat: repeat; background-attachment: local; - transition: transform 500ms, width 500ms, height 500ms; + transition: + transform 500ms, + width 500ms, + height 500ms; transform-origin: top left; - transform: scale(${(props) => props.zoomFactor ?? 1}); + transform: scale(${(props) => props.scale ?? 1}); `; type OwnProps = { children: ReactNode }; -type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; zoomFactor: number; }; +type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; scale: number }; type DispatchProps = { move: AsyncDispatch; @@ -61,7 +64,7 @@ const enhance = connect( moving: [...state.moving], connecting: state.connecting.length > 0, reconnecting: Object.keys(state.reconnecting).length > 0, - zoomFactor: state.editor.zoomFactor, + scale: state.editor.zoomFactor, }), { move: UMLElementRepository.move, @@ -90,52 +93,15 @@ class EditorComponent extends Component { zoomContainer = createRef(); componentDidMount() { - // const { zoomFactor = 1 } = this.props; - window.addEventListener( 'wheel', (event) => { if (event.ctrlKey) { event.preventDefault(); - // this.props.changeZoomFactor(clamp(zoomFactor - event.deltaY * 0.1, minScale, maxScale)); } }, { passive: false }, ); - - /* - window.addEventListener('gesturestart', (event) => { - event.preventDefault(); - - this.setState({ - ...this.state, - gestureStartZoomFactor: zoomFactor, - }); - }); - - window.addEventListener('gesturechange', (event) => { - event.preventDefault(); - - const { zoomFactor = 1, } = this.props; - - const relativeCursorOffsetX = (event as any).clientX - this.editor.current!.getBoundingClientRect().x; - const relativeCursorOffsetY = (event as any).clientY - this.editor.current!.getBoundingClientRect().y; - - const newZoomFactor = clamp(this.state.gestureStartZoomFactor * (event as any).scale, minScale, maxScale); - - this.zoomContainer.current?.scrollBy({ - left: newZoomFactor * relativeCursorOffsetX - zoomFactor * relativeCursorOffsetX , - top: newZoomFactor * relativeCursorOffsetY - zoomFactor * relativeCursorOffsetY, - behavior: 'smooth' - }); - - this.props.changeZoomFactor(newZoomFactor); - }); - - window.addEventListener('gestureend', function (event) { - event.preventDefault(); - }); - */ } componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { @@ -154,14 +120,17 @@ class EditorComponent extends Component { } render() { - const { moving, connecting, reconnecting, zoomFactor = 1.0, ...props } = this.props; + const { moving, connecting, reconnecting, scale = 1.0, ...props } = this.props; if (this.state.isMobile) { return ( -
1.0 ? 'auto' : 'hidden' }}> - +
1.0 ? 'auto' : 'hidden' }} + > + this.props.changeZoomFactor(zoomFactor)} min={minScale} max={maxScale} @@ -171,10 +140,13 @@ class EditorComponent extends Component { ); } else { return ( -
1.0 ? 'auto' : 'hidden' }}> - +
1.0 ? 'auto' : 'hidden' }} + > + this.props.changeZoomFactor(zoomFactor)} min={minScale} max={maxScale} @@ -186,7 +158,7 @@ class EditorComponent extends Component { } customScrolling = (event: React.TouchEvent) => { - const { zoomFactor = 1 } = this.props; + const { scale = 1 } = this.props; if (this.editor.current) { const clientRect = this.editor.current.getBoundingClientRect(); @@ -195,15 +167,15 @@ class EditorComponent extends Component { // scroll when on the edge of the element const scrollHorizontally = - touch.clientX * zoomFactor < clientRect.x + SCROLL_BORDER + touch.clientX * scale < clientRect.x + SCROLL_BORDER ? -SCROLL_DISTANCE - : touch.clientX * zoomFactor > clientRect.x + clientRect.width - SCROLL_BORDER + : touch.clientX * scale > clientRect.x + clientRect.width - SCROLL_BORDER ? SCROLL_DISTANCE : 0; const scrollVertically = - touch.clientY * zoomFactor < clientRect.y + SCROLL_BORDER + touch.clientY * scale < clientRect.y + SCROLL_BORDER ? -SCROLL_DISTANCE - : touch.clientY * zoomFactor > clientRect.y + clientRect.height - SCROLL_BORDER + : touch.clientY * scale > clientRect.y + clientRect.height - SCROLL_BORDER ? SCROLL_DISTANCE : 0; this.editor.current.scrollBy(scrollHorizontally, scrollVertically); diff --git a/src/main/components/canvas/zoom-pane.tsx b/src/main/components/canvas/zoom-pane.tsx index 59d581f5..50f72d0f 100644 --- a/src/main/components/canvas/zoom-pane.tsx +++ b/src/main/components/canvas/zoom-pane.tsx @@ -13,7 +13,7 @@ export const ZoomPaneComponent: FunctionComponent = (props) => { const { min = 0.5, max = 5, step = 0.5, value, onChange } = props; return ( -
+