import React, { useEffect } from 'react'; import { Topology } from '@topology/core'; import { PageHeader, Button } from 'antd'; let canvas; let x, y; const Preview = ({ history }) => { useEffect(() => { const canvasOptions = { rotateCursor: '/rotate.cur', locked: 2 }; canvas = new Topology('topology-canvas-preview', canvasOptions); history.location.state.data.locked = 2; const layoutEx = history.location.state.data; layoutEx.pens = layoutEx.pens && layoutEx.pens.length && layoutEx.pens.map(item => ({ ...item, elementLoaded: false })) || [] canvas.open(layoutEx); }, [history.location.state.data]); /** * 自动适应窗口大小 */ const onHandleFit = () => { const rect = canvas.getRect(); rect.calcCenter(); x = document.body.clientWidth / 2 - rect.center.x; y = (document.body.clientHeight - 66) / 2 - rect.center.y; canvas.translate(x, y); }; /** * 实际大小 */ const onHandlePre = () => { canvas.translate(-x, -y); x = 0; y = 0; }; return ( <> <PageHeader style={{ border: '1px solid rgb(235, 237, 240)' }} extra={[ <Button type="primary" key="2" onClick={() => onHandleFit()}> 自动适应窗口大小 </Button>, <Button key="1" onClick={() => onHandlePre()}> 实际大小 </Button> ]} onBack={() => history.push({ pathname: '/', state: { data: history.location.state.data, from: '/preview' } }) } title="返回画板" subTitle="预览" /> <div id="topology-canvas-preview" style={{ height: 'calc(100vh - 66px)' }} /> </> ); }; export default Preview;