Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-2-capstone-design2
/
2017110269
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
MinsoftK
2020-12-14 20:37:24 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7d3ef3624371c2b02ecd5d5b6c32226d4052482f
7d3ef362
1 parent
f63037a4
Update Tikz to Editor
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
112 additions
and
65 deletions
mypro/client/src/Container/Home.js
mypro/client/src/Container/Html.js
mypro/client/src/Container/Tikz.js
mypro/client/src/component/tikzForm.js
mypro/client/src/Container/Home.js
View file @
7d3ef36
...
...
@@ -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
){
...
...
mypro/client/src/Container/Html.js
View file @
7d3ef36
...
...
@@ -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
>
...
...
mypro/client/src/Container/Tikz.js
View file @
7d3ef36
...
...
@@ -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
>
);
};
...
...
mypro/client/src/component/tikzForm.js
View file @
7d3ef36
...
...
@@ -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
>
...
...
Please
register
or
login
to post a comment