plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
60 lines (59 loc) • 5.19 kB
JavaScript
import React from 'react';
import { Form, Slider, Col, Select, Tag, Row } from 'antd';
import i18n from 'i18next';
import sortBy from 'lodash/sortBy';
import Icon from '../../icon/Icon';
import Fonts from '../../font/fonts';
const fonts = Fonts.getFonts();
export default {
render(canvasRef, form, data) {
return (React.createElement(React.Fragment, null,
React.createElement(Col, { span: 16 },
React.createElement(Form.Item, { label: i18n.t('common.font-family'), colon: false, name: "fontFamily", initialValue: data.fontFamily, labelCol: { span: 24 } },
React.createElement(Select, null, Object.keys(fonts).map((font) => {
return (React.createElement(Select.OptGroup, { key: font, label: font.toUpperCase() }, sortBy(fonts[font], ['name']).map((f) => (React.createElement(Select.Option, { key: f.name, value: f.name }, f.name)))));
})))),
React.createElement(Col, { span: 8 },
React.createElement(Form.Item, { label: i18n.t('common.font-size'), colon: false, name: "fontSize", initialValue: data.fontSize || '32', labelCol: { span: 24 } },
React.createElement(Select, null, Array.from({ length: 60 }, (v, k) => (React.createElement(Select.Option, { key: k, value: `${k + 1}` }, k + 1)))))),
React.createElement(Row, null,
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "fontWeight", valuePropName: "checked", initialValue: data.fontWeight === 'bold', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "bold" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "fontStyle", valuePropName: "checked", initialValue: data.fontStyle === 'italic', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "italic" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "linethrough", valuePropName: "checked", initialValue: data.linethrough, labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "strikethrough" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "underline", valuePropName: "checked", initialValue: data.underline, labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "underline" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "textAlign.left", valuePropName: "checked", initialValue: data.textAlign === 'left', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "align-left" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "textAlign.center", valuePropName: "checked", initialValue: data.textAlign === 'center', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "align-center" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "textAlign.right", valuePropName: "checked", initialValue: data.textAlign === 'right', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "align-right" })))),
React.createElement(Col, { span: 6 },
React.createElement(Form.Item, { name: "textAlign.justify", valuePropName: "checked", initialValue: data.textAlign === 'justify', labelCol: { span: 24 } },
React.createElement(Tag.CheckableTag, { className: "rde-action-tag" },
React.createElement(Icon, { name: "align-justify" }))))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.line-height'), colon: false, name: "lineHeight", initialValue: data.lineHeight, labelCol: { span: 24 } },
React.createElement(Slider, { min: 0, max: 100 }))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.char-spacing'), colon: false, name: "charSpacing", initialValue: data.charSpacing, labelCol: { span: 24 } },
React.createElement(Slider, { min: 0, max: 100 })))));
},
};