hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
198 lines • 13.2 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("../../../components/common/ColorPicker"));
const Icon_1 = __importDefault(require("../../../components/icon/Icon"));
exports.default = {
render(canvasRef, form, data) {
const { getFieldDecorator } = form;
if (!data) {
return null;
}
const type = data.animation.type || 'none';
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.animation-type'), colon: false }, getFieldDecorator('animation.type', {
initialValue: type,
})(react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "none" }, i18next_1.default.t('imagemap.animation.none')),
react_1.default.createElement(antd_1.Select.Option, { value: "fade" }, i18next_1.default.t('imagemap.animation.fade')),
react_1.default.createElement(antd_1.Select.Option, { value: "bounce" }, i18next_1.default.t('imagemap.animation.bounce')),
react_1.default.createElement(antd_1.Select.Option, { value: "shake" }, i18next_1.default.t('imagemap.animation.shake')),
react_1.default.createElement(antd_1.Select.Option, { value: "scaling" }, i18next_1.default.t('imagemap.animation.scaling')),
react_1.default.createElement(antd_1.Select.Option, { value: "rotation" }, i18next_1.default.t('imagemap.animation.rotation')),
react_1.default.createElement(antd_1.Select.Option, { value: "flash" }, i18next_1.default.t('imagemap.animation.flash'))))),
type === 'none' ? null : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Row, null,
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.auto-play'), colon: false }, getFieldDecorator('animation.autoplay', {
rules: [
{
type: 'boolean',
},
],
valuePropName: 'checked',
initialValue: data.animation.autoplay,
})(react_1.default.createElement(antd_1.Switch, { size: "small" })))),
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.loop'), colon: false }, getFieldDecorator('animation.loop', {
rules: [
{
type: 'boolean',
},
],
valuePropName: 'checked',
initialValue: data.animation.loop,
})(react_1.default.createElement(antd_1.Switch, { size: "small" }))))),
type !== 'shake' ? (react_1.default.createElement(antd_1.Row, null,
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.delay'), colon: false }, getFieldDecorator('animation.delay', {
rules: [
{
type: 'number',
min: 0,
max: 5000,
},
],
initialValue: data.animation.delay || 0,
})(react_1.default.createElement(antd_1.Slider, { min: 0, max: 5000, step: 100 })))),
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.duration'), colon: false }, getFieldDecorator('animation.duration', {
rules: [
{
type: 'number',
min: 100,
max: 5000,
},
],
initialValue: data.animation.duration,
})(react_1.default.createElement(antd_1.Slider, { min: 100, max: 5000, step: 100 })))))) : null,
this.getComponentType(type, data, getFieldDecorator),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.playback'), colon: false },
react_1.default.createElement(antd_1.Row, null,
react_1.default.createElement(antd_1.Col, { span: 8 },
react_1.default.createElement(antd_1.Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.play(data.id);
} },
react_1.default.createElement(Icon_1.default, { name: "play", style: { marginRight: 8 } }),
i18next_1.default.t('action.start'))),
react_1.default.createElement(antd_1.Col, { span: 8 },
react_1.default.createElement(antd_1.Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.pause(data.id);
} },
react_1.default.createElement(Icon_1.default, { name: "pause", style: { marginRight: 8 } }),
i18next_1.default.t('action.pause'))),
react_1.default.createElement(antd_1.Col, { span: 8 },
react_1.default.createElement(antd_1.Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.stop(data.id);
} },
react_1.default.createElement(Icon_1.default, { name: "stop", style: { marginRight: 8 } }),
i18next_1.default.t('action.stop')))))))));
},
getComponentType(type, data, getFieldDecorator) {
let component;
if (type === 'fade') {
component = (react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.opacity'), colon: false }, getFieldDecorator('animation.opacity', {
rules: [
{
type: 'number',
min: 0,
max: 1,
},
],
initialValue: data.animation.opacity || 0,
})(react_1.default.createElement(antd_1.Slider, { min: 0, max: 1, step: 0.1 }))));
}
else if (type === 'bounce') {
component = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.bounce-type'), colon: false }, getFieldDecorator('animation.bounce', {
initialValue: data.animation.bounce || 'hotizontal',
})(react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "hotizontal" }, "Horizontal"),
react_1.default.createElement(antd_1.Select.Option, { value: "vertical" }, "Vertical")))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.offset'), colon: false }, getFieldDecorator('animation.offset', {
rules: [
{
type: 'number',
min: 1,
max: 10,
},
],
initialValue: data.animation.offset || 1,
})(react_1.default.createElement(antd_1.Slider, { min: 1, max: 10, step: 1 })))));
}
else if (type === 'shake') {
component = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.shake-type'), colon: false }, getFieldDecorator('animation.shake', {
initialValue: data.animation.shake || 'hotizontal',
})(react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "hotizontal" }, i18next_1.default.t('common.horizontal')),
react_1.default.createElement(antd_1.Select.Option, { value: "vertical" }, i18next_1.default.t('common.vertical'))))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.offset'), colon: false }, getFieldDecorator('animation.offset', {
rules: [
{
type: 'number',
min: 1,
max: 10,
},
],
initialValue: data.animation.offset || 1,
})(react_1.default.createElement(antd_1.Slider, { min: 1, max: 10, step: 1 })))));
}
else if (type === 'scaling') {
component = (react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.animation.scaling'), colon: false }, getFieldDecorator('animation.scale', {
rules: [
{
type: 'number',
min: 1,
max: 5,
},
],
initialValue: data.animation.scale || 2,
})(react_1.default.createElement(antd_1.Slider, { min: 1, max: 5, step: 0.1 }))));
}
else if (type === 'rotation') {
component = (react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.angle'), colon: false }, getFieldDecorator('animation.angle', {
rules: [
{
type: 'number',
min: 0,
max: 360,
},
],
initialValue: data.animation.angle || 360,
})(react_1.default.createElement(antd_1.Slider, { min: 0, max: 360 }))));
}
else if (type === 'flash') {
component = (react_1.default.createElement(antd_1.Row, null,
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.fill-color'), colon: false }, getFieldDecorator('animation.fill', {
initialValue: data.animation.fill || data.fill,
})(react_1.default.createElement(ColorPicker_1.default, null)))),
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('imagemap.style.stroke-color'), colon: false }, getFieldDecorator('animation.stroke', {
initialValue: data.animation.stroke || data.stroke,
})(react_1.default.createElement(ColorPicker_1.default, null))))));
}
else {
component = (react_1.default.createElement(antd_1.Row, null,
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.value'), colon: false }, getFieldDecorator('animation.value', {
rules: [
{
type: 'number',
min: 1,
max: 10,
},
],
initialValue: data.animation.value || 1,
})(react_1.default.createElement(antd_1.InputNumber, { min: 1, max: 10 }))))));
}
return component;
},
};
//# sourceMappingURL=AnimationProperty.js.map