Add responsive width for canvas
This commit is contained in:
parent
f22c0f5baa
commit
7443faf883
|
@ -115,4 +115,6 @@ html, body {
|
|||
&:active {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
border: 1px solid @border-color-split;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
|
@ -16,25 +18,42 @@ import {
|
|||
DashboardOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
|
||||
import { connect } from 'react-redux';
|
||||
import { Parser } from 'mlg-converter';
|
||||
import { Field, Result as ParserResult } from 'mlg-converter/dist/types';
|
||||
import PerfectScrollbar from 'react-perfect-scrollbar';
|
||||
import { loadLogs } from '../utils/api';
|
||||
import Canvas, { LogEntry } from './Log/Canvas';
|
||||
import { AppState, UIState } from '../types/state';
|
||||
import { Config } from '../types/config';
|
||||
import store from '../store';
|
||||
|
||||
// const { SubMenu } = Menu;
|
||||
const { TabPane } = Tabs;
|
||||
const { Content } = Layout;
|
||||
|
||||
const Log = () => {
|
||||
const mapStateToProps = (state: AppState) => ({
|
||||
ui: state.ui,
|
||||
status: state.status,
|
||||
config: state.config,
|
||||
});
|
||||
|
||||
const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
|
||||
const { Sider } = Layout;
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const margin = 30;
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const sidebarWidth = 250;
|
||||
const calculateCanvasWidth = useCallback(() => setCanvasWidth((contentRef.current?.clientWidth || 0) - margin), []);
|
||||
const siderProps = {
|
||||
width: sidebarWidth,
|
||||
collapsible: true,
|
||||
breakpoint: 'xl',
|
||||
// collapsed: ui.sidebarCollapsed,
|
||||
// onCollapse: (collapsed: boolean) => store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed }),
|
||||
collapsed: ui.sidebarCollapsed,
|
||||
onCollapse: (collapsed: boolean) => {
|
||||
store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed });
|
||||
setTimeout(calculateCanvasWidth, 1);
|
||||
},
|
||||
} as any;
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [logs, setLogs] = useState<ParserResult>();
|
||||
|
@ -58,7 +77,12 @@ const Log = () => {
|
|||
|
||||
console.log(parsed);
|
||||
});
|
||||
}, []);
|
||||
|
||||
window.addEventListener('resize', calculateCanvasWidth);
|
||||
calculateCanvasWidth();
|
||||
|
||||
return () => window.removeEventListener('resize', calculateCanvasWidth);
|
||||
}, [calculateCanvasWidth]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -66,6 +90,7 @@ const Log = () => {
|
|||
{isLoading ?
|
||||
<Skeleton />
|
||||
:
|
||||
!ui.sidebarCollapsed &&
|
||||
<Tabs defaultActiveKey="fields" style={{ marginLeft: 20 }}>
|
||||
<TabPane tab={<EditOutlined />} key="fields">
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }}>
|
||||
|
@ -91,15 +116,21 @@ const Log = () => {
|
|||
</Sider>
|
||||
<Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>
|
||||
<Content>
|
||||
<div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
|
||||
{isLoading ?
|
||||
<Spin size="large" />
|
||||
:
|
||||
<Canvas data={logs!.records as LogEntry[]} />
|
||||
<Canvas
|
||||
data={logs!.records as LogEntry[]}
|
||||
width={canvasWidth}
|
||||
height={600}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Log;
|
||||
export default connect(mapStateToProps)(Log);
|
||||
|
|
|
@ -24,7 +24,15 @@ enum Colors {
|
|||
WHITE = '#fff',
|
||||
}
|
||||
|
||||
const Canvas = ({ data }: { data: LogEntry[] }) => {
|
||||
const Canvas = ({
|
||||
data,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
data: LogEntry[],
|
||||
width: number,
|
||||
height: number,
|
||||
}) => {
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [pan, setPan] = useState(0);
|
||||
const [isMouseDown, setIsMouseDown] = useState(false);
|
||||
|
@ -32,7 +40,7 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
|
|||
const [previousTouch, setPreviousTouch] = useState<Touch | null>(null);
|
||||
const leftBoundary = 0;
|
||||
const [rightBoundary, setRightBoundary] = useState(0);
|
||||
const canvasRef = useRef<HTMLCanvasElement>();
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const checkPan = (current: number, value: number) => {
|
||||
if (current > leftBoundary) {
|
||||
return leftBoundary;
|
||||
|
@ -139,14 +147,14 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
|
|||
|
||||
useEffect(() => {
|
||||
plot();
|
||||
}, [plot]);
|
||||
}, [plot, width, height]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef as any}
|
||||
className="plot"
|
||||
width="1200px"
|
||||
height="600px"
|
||||
width={width}
|
||||
height={height}
|
||||
onWheel={onWheel}
|
||||
onMouseMove={onMouseMove}
|
||||
onTouchMove={onTouchMove}
|
||||
|
|
Loading…
Reference in New Issue