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