plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
28 lines (27 loc) • 2.12 kB
JavaScript
import React from 'react';
import { Form, Slider, Select, InputNumber, Col, Row } from 'antd';
import i18n from 'i18next';
import ColorPicker from '../../common/ColorPicker';
export default {
render(canvasRef, form, data) {
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('imagemap.style.fill-color'), colon: false, name: "fill", initialValue: data.fill || 'rgba(0, 0, 0, 1)' },
React.createElement(ColorPicker, null)),
React.createElement(Form.Item, { label: i18n.t('common.opacity'), colon: false, name: "opacity", initialValue: data.opacity || 1, rules: [{ type: 'number', min: 0, max: 1 }] },
React.createElement(Slider, { min: 0, max: 1, step: 0.1 })),
React.createElement(Form.Item, { label: i18n.t('imagemap.style.stroke-color'), colon: false, name: "stroke", initialValue: data.stroke || 'rgba(255, 255, 255, 0)' },
React.createElement(ColorPicker, null)),
React.createElement(Form.Item, { label: i18n.t('imagemap.style.stroke-width'), colon: false, name: "strokeWidth", initialValue: data.strokeWidth || 1 },
React.createElement(Select, { showSearch: true, style: { width: '100%' } }, Array.from({ length: 12 }, (v, k) => {
const value = k + 1;
return (React.createElement(Select.Option, { key: value, value: value }, value));
}))),
data.type === 'rect' ? (React.createElement(Row, { gutter: 8 },
React.createElement(Col, { md: 24, lg: 12 },
React.createElement(Form.Item, { label: i18n.t('imagemap.style.rx'), colon: false, name: "rx", initialValue: data.rx || 0 },
React.createElement(InputNumber, { min: 0 }))),
React.createElement(Col, { md: 24, lg: 12 },
React.createElement(Form.Item, { label: i18n.t('imagemap.style.ry'), colon: false, name: "ry", initialValue: data.ry || 0 },
React.createElement(InputNumber, { min: 0 }))))) : null));
},
};