plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
47 lines (46 loc) • 3.13 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 ColorPicker_1 = __importDefault(require("../../common/ColorPicker"));
exports.default = {
render(canvasRef, form, data) {
const { getFieldDecorator } = form;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.fill-color'), colon: false }, getFieldDecorator('fill', {
initialValue: data.fill || 'rgba(0, 0, 0, 1)',
})(react_1.default.createElement(ColorPicker_1.default, null))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.opacity'), colon: false }, getFieldDecorator('opacity', {
rules: [
{
type: 'number',
min: 0,
max: 1,
},
],
initialValue: data.opacity || 1,
})(react_1.default.createElement(antd_1.Slider, { min: 0, max: 1, step: 0.1 }))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.stroke-color'), colon: false }, getFieldDecorator('stroke', {
initialValue: data.stroke || 'rgba(255, 255, 255, 0)',
})(react_1.default.createElement(ColorPicker_1.default, null))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.stroke-width'), colon: false }, getFieldDecorator('strokeWidth', {
initialValue: data.strokeWidth || 1,
})(react_1.default.createElement(antd_1.Select, { showSearch: true, style: { width: '100%' } }, Array.from({ length: 12 }, (v, k) => {
const value = k + 1;
return (react_1.default.createElement(antd_1.Select.Option, { key: value, value: value }, value));
})))),
data.type === 'rect' ? (react_1.default.createElement(antd_1.Row, { gutter: 8 },
react_1.default.createElement(antd_1.Col, { md: 24, lg: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.rx'), colon: false }, getFieldDecorator('rx', {
initialValue: data.rx || 0,
})(react_1.default.createElement(antd_1.InputNumber, { min: 0 })))),
react_1.default.createElement(antd_1.Col, { md: 24, lg: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.ry'), colon: false }, getFieldDecorator('ry', {
initialValue: data.ry || 0,
})(react_1.default.createElement(antd_1.InputNumber, { min: 0 })))))) : null));
},
};