97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import { Button, Form, Input, InputNumber, Modal } from "antd";
|
|
import { observer } from "mobx-react-lite";
|
|
import { useCallback } from "react";
|
|
import store from "../../store/global";
|
|
import { getDefaultGlobalData } from "../../util/editor";
|
|
import { unwrappedAction } from "../../store/history";
|
|
|
|
const ImmediateNumberConfigInput = observer(({ propertyName, ...props }) => {
|
|
const handleChange = unwrappedAction((ev) => {
|
|
const v = Number(ev.target.value) | 0;
|
|
store[propertyName] = v;
|
|
});
|
|
return (
|
|
<Input value={store[propertyName]} onChange={handleChange} {...props} />
|
|
);
|
|
});
|
|
function ImmediateNumberConfigItem({ propertyName, label, ...props }) {
|
|
return (
|
|
<Form.Item label={label} {...props}>
|
|
<ImmediateNumberConfigInput propertyName={propertyName} />
|
|
</Form.Item>
|
|
);
|
|
}
|
|
|
|
function ConfigModal({ visible, onVisibleChange }) {
|
|
const handleClose = useCallback(() => {
|
|
onVisibleChange?.call(null, false);
|
|
}, [onVisibleChange]);
|
|
const resetConfig = useCallback(
|
|
unwrappedAction(() => {
|
|
const {
|
|
canvasWidth,
|
|
canvasHeight,
|
|
marginTop,
|
|
marginHorizontal,
|
|
} = getDefaultGlobalData();
|
|
Object.assign(store, {
|
|
canvasWidth,
|
|
canvasHeight,
|
|
marginTop,
|
|
marginHorizontal,
|
|
});
|
|
})
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title="配置"
|
|
onCancel={handleClose}
|
|
footer={[
|
|
<Button key="reset" onClick={resetConfig}>
|
|
重置为默认
|
|
</Button>,
|
|
<Button key="close" type="primary" onClick={handleClose}>
|
|
关闭
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Form labelAlign="right" labelCol={{ span: 4 }}>
|
|
<Form.Item label="画布大小">
|
|
<Input.Group>
|
|
<ImmediateNumberConfigInput
|
|
propertyName="canvasWidth"
|
|
style={{ width: "45%", textAlign: "center" }}
|
|
/>
|
|
|
|
<Input
|
|
className="site-input-split"
|
|
style={{
|
|
width: "10%",
|
|
borderLeft: 0,
|
|
borderRight: 0,
|
|
textAlign: "center",
|
|
pointerEvents: "none",
|
|
}}
|
|
placeholder="x"
|
|
disabled
|
|
/>
|
|
<ImmediateNumberConfigInput
|
|
propertyName="canvasHeight"
|
|
style={{ width: "45%", textAlign: "center" }}
|
|
/>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
<ImmediateNumberConfigItem label="顶部边距" propertyName="marginTop" />
|
|
<ImmediateNumberConfigItem
|
|
label="左右边距"
|
|
propertyName="marginHorizontal"
|
|
/>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default ConfigModal;
|