2020-2-capstone-design2 / 2017110269

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
7d3ef362 1 parent f63037a4

Update Tikz to Editor

Inline Side-by-side
Showing 4 changed files with 112 additions and 65 deletions
......@@ -206,24 +206,9 @@ const Home = ({history}) => {
}
},
},
{
title: 'Mathcha',
dataIndex: 'mathcharFileName',
render: (value, row) => {
if(value){
return (
<a href={`${host}/mathchaDownload/${value}`}>
<DownloadOutlined/>
</a>
);
}else{
return <span>-</span>
}
},
},
{
title: 'TikZ',
title: 'Editing Image',
dataIndex: 'tex',
render:(value, row) => {
if(value){
......
......@@ -218,8 +218,8 @@ const Html = ({ visible, onCancel, callback }) => {
},
]}>
<Select onChange={onChangeTypeSol}>
<Option value="오지선다형">JPEG</Option>
<Option value="단답형">PNG</Option>
<Option value="JPEG">JPEG</Option>
<Option value="PNG">PNG</Option>
</Select>
</Form.Item>
......
......@@ -4,7 +4,8 @@ import { UploadOutlined, RetweetOutlined } from '@ant-design/icons';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { getTexToSvg, checkQno, saveFileAndQno } from '../lib/api/tikz'; // Request api
import TikzForm from '../component/tikzForm';
import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/react-image-editor'
const fetchTexToSvg = async (data) => {
......@@ -187,7 +188,7 @@ const fetchCheckQno = async(qno) => {
console.log(values);
console.log(qnoCheck);
if(!qnoCheck){
message.warning("문제 번호를 확인해 주세요.")
message.warning("그림 번호를 확인해 주세요.")
return;
}else{
const creator = sessionStorage.getItem('id');
......@@ -223,9 +224,84 @@ const fetchCheckQno = async(qno) => {
setFields([...fields, {name:['typeQue'],value:value}])
}
const myTheme = {
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'common.bisize.height': '21px',
'common.backgroundImage': 'none',
'common.backgroundColor': '#1e1e1e',
'common.border': '0px',
// header
'header.backgroundImage': 'none',
'header.backgroundColor': 'transparent',
'header.border': '0px',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': 'NotoSans, sans-serif',
'loadButton.fontSize': '12px',
// download button
'downloadButton.backgroundColor': '#fdba3b',
'downloadButton.border': '1px solid #fdba3b',
'downloadButton.color': '#fff',
'downloadButton.fontFamily': 'NotoSans, sans-serif',
'downloadButton.fontSize': '12px',
// icons default
'menu.normalIcon.color': '#8a8a8a',
'menu.activeIcon.color': '#555555',
'menu.disabledIcon.color': '#434343',
'menu.hoverIcon.color': '#e9e9e9',
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#e9e9e9',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'lighter',
'submenu.activeLabel.color': '#fff',
'submenu.activeLabel.fontWeight': 'lighter',
// checkbox style
'checkbox.border': '1px solid #ccc',
'checkbox.backgroundColor': '#fff',
// rango style
'range.pointer.color': '#fff',
'range.bar.color': '#666',
'range.subbar.color': '#d1d1d1',
'range.disabledPointer.color': '#414141',
'range.disabledBar.color': '#282828',
'range.disabledSubbar.color': '#414141',
'range.value.color': '#fff',
'range.value.fontWeight': 'lighter',
'range.value.fontSize': '11px',
'range.value.border': '1px solid #353535',
'range.value.backgroundColor': '#151515',
'range.title.color': '#fff',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'
};
return (
<Drawer
title={'Tikz Editor'}
title={'Image Editor'}
placement={'bottom'}
closable={true}
height={'90vh'}
......@@ -245,6 +321,30 @@ const fetchCheckQno = async(qno) => {
onChangeTypeQue={onChangeTypeQue}
qno={qno}>
</TikzForm>
<ImageEditor
includeUI={{
loadImage: {
path: 'img/sampleImage.jpg',
name: 'SampleImage'
},
theme: myTheme,
menu: ['shape', 'filter'],
initMenu: 'filter',
uiSize: {
width: '1000px',
height: '700px'
},
menuBarPosition: 'bottom'
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70
}}
usageStatistics={true}
/>
</Drawer>
);
};
......
......@@ -47,61 +47,23 @@ console.log(fields);
<Form.Item
name="typeQue"
label="문제/풀이 구분"
label="그림 형식 구분"
rules={[
{
required: true,
message: '문제/풀이 구분을 선택해 주세요.',
message: '그림 파일 유형을 선택해 주세요.',
},
]}
wrapperCol={{span: 2 }}
>
<Select onChange={onChangeTypeQue}>
<Option value="문제">문제</Option>
<Option value="풀이">풀이</Option>
<Option value="JPEG">JPEG</Option>
<Option value="PNG">PNG</Option>
</Select>
</Form.Item>
<Row justify="space-between" align="middle">
<Col span={11}>
<Form.Item name="tikzCode" rules={[{ required: true, message: 'tikz 코드를 입력해 주세요.' }]} initialValue={tikzcode}>
<TextArea
style={{ width: '44vw', height: '70vh' }}
onChange={onChangeTikz}
/>
</Form.Item>
</Col>
<Col span={2} style={{textAlign:'center'}} >
<Tooltip title={'tikz 미리보기'}>
<Button type="ghost" icon={<RetweetOutlined />} onClick={onClickEvent}></Button>
</Tooltip>
</Col>
<Col span={11} >
<IFrame
style={{
width: '44vw',
height: '70vh',
marginTop: '-15px',
border: '1px solid #d9d9d9',
}}>
<PanZoom
style={{
display: 'block',
outline: 'none',
width: '44vw',
height: '70vh',
margin: '0px',
}}>
<div dangerouslySetInnerHTML={{ __html: svg }} />
</PanZoom>
</IFrame>
</Col>
</Row>
<Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
저장하기
</Button>
......