plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
109 lines (108 loc) • 8.32 kB
JavaScript
import React from 'react';
import { Row, Col, Form, Button, Select, Switch, Slider, InputNumber } from 'antd';
import i18n from 'i18next';
import ColorPicker from '../../common/ColorPicker';
import Icon from '../../icon/Icon';
export default {
render(canvasRef, form, data) {
if (!data) {
return null;
}
const type = data.animation.type || 'none';
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('imagemap.animation.animation-type'), colon: false, name: "animation.type", initialValue: type },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "none" }, i18n.t('imagemap.animation.none')),
React.createElement(Select.Option, { value: "fade" }, i18n.t('imagemap.animation.fade')),
React.createElement(Select.Option, { value: "bounce" }, i18n.t('imagemap.animation.bounce')),
React.createElement(Select.Option, { value: "shake" }, i18n.t('imagemap.animation.shake')),
React.createElement(Select.Option, { value: "scaling" }, i18n.t('imagemap.animation.scaling')),
React.createElement(Select.Option, { value: "rotation" }, i18n.t('imagemap.animation.rotation')),
React.createElement(Select.Option, { value: "flash" }, i18n.t('imagemap.animation.flash')))),
type === 'none' ? null : (React.createElement(React.Fragment, null,
React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('imagemap.animation.auto-play'), colon: false, name: "animation.autoplay", valuePropName: "checked", initialValue: data.animation.autoplay },
React.createElement(Switch, { size: "small" }))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.loop'), colon: false, name: "animation.loop", valuePropName: "checked", initialValue: data.animation.loop },
React.createElement(Switch, { size: "small" })))),
type !== 'shake' ? (React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.delay'), colon: false, name: "animation.delay", initialValue: data.animation.delay || 0 },
React.createElement(Slider, { min: 0, max: 5000, step: 100 }))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.duration'), colon: false, name: "animation.duration", initialValue: data.animation.duration },
React.createElement(Slider, { min: 100, max: 5000, step: 100 }))))) : null,
this.getComponentType(type, data),
React.createElement(Form.Item, { label: i18n.t('imagemap.animation.playback'), colon: false },
React.createElement(Row, null,
React.createElement(Col, { span: 8 },
React.createElement(Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.play(data.id);
} },
React.createElement(Icon, { name: "play", style: { marginRight: 8 } }),
i18n.t('action.start'))),
React.createElement(Col, { span: 8 },
React.createElement(Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.pause(data.id);
} },
React.createElement(Icon, { name: "pause", style: { marginRight: 8 } }),
i18n.t('action.pause'))),
React.createElement(Col, { span: 8 },
React.createElement(Button, { block: true, size: "small", onClick: () => {
canvasRef.handler.animationHandler.stop(data.id);
} },
React.createElement(Icon, { name: "stop", style: { marginRight: 8 } }),
i18n.t('action.stop')))))))));
},
getComponentType(type, data) {
let component;
if (type === 'fade') {
component = (React.createElement(Form.Item, { label: i18n.t('common.opacity'), colon: false, name: "animation.opacity", initialValue: data.animation.opacity || 0 },
React.createElement(Slider, { min: 0, max: 1, step: 0.1 })));
}
else if (type === 'bounce') {
component = (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('imagemap.animation.bounce-type'), colon: false, name: "animation.bounce", initialValue: data.animation.bounce || 'hotizontal' },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "hotizontal" }, i18n.t('common.horizontal')),
React.createElement(Select.Option, { value: "vertical" }, i18n.t('common.vertical')))),
React.createElement(Form.Item, { label: i18n.t('common.offset'), colon: false, name: "animation.offset", initialValue: data.animation.offset || 1 },
React.createElement(Slider, { min: 1, max: 10, step: 1 }))));
}
else if (type === 'shake') {
component = (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('imagemap.animation.shake-type'), colon: false, name: "animation.shake", initialValue: data.animation.shake || 'hotizontal' },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "hotizontal" }, i18n.t('common.horizontal')),
React.createElement(Select.Option, { value: "vertical" }, i18n.t('common.vertical')))),
React.createElement(Form.Item, { label: i18n.t('common.offset'), colon: false, name: "animation.offset", initialValue: data.animation.offset || 1 },
React.createElement(Slider, { min: 1, max: 10, step: 1 }))));
}
else if (type === 'scaling') {
component = (React.createElement(Form.Item, { label: i18n.t('imagemap.animation.scaling'), colon: false, name: "animation.scale", initialValue: data.animation.scale || 2 },
React.createElement(Slider, { min: 1, max: 5, step: 0.1 })));
}
else if (type === 'rotation') {
component = (React.createElement(Form.Item, { label: i18n.t('common.angle'), colon: false, name: "animation.angle", initialValue: data.animation.angle || 360 },
React.createElement(Slider, { min: 0, max: 360 })));
}
else if (type === 'flash') {
component = (React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('imagemap.style.fill-color'), colon: false, name: "animation.fill", initialValue: data.animation.fill || data.fill },
React.createElement(ColorPicker, null))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('imagemap.style.stroke-color'), colon: false, name: "animation.stroke", initialValue: data.animation.stroke || data.stroke },
React.createElement(ColorPicker, null)))));
}
else {
component = (React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: i18n.t('common.value'), colon: false, name: "animation.value", initialValue: data.animation.value || 1 },
React.createElement(InputNumber, { min: 1, max: 10 })))));
}
return component;
},
};