plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
101 lines (100 loc) • 7.56 kB
JavaScript
import React from 'react';
import { Row, Col, Form, Button, Select, Switch, Slider, InputNumber } from 'antd';
import ColorPicker from '../../common/ColorPicker';
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: "Animation Type", colon: false, name: "animation.type", initialValue: type },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "none" }, "None"),
React.createElement(Select.Option, { value: "fade" }, "Fade"),
React.createElement(Select.Option, { value: "bounce" }, "Bounce"),
React.createElement(Select.Option, { value: "shake" }, "Shake"),
React.createElement(Select.Option, { value: "scaling" }, "Scaling"),
React.createElement(Select.Option, { value: "rotation" }, "Rotation"),
React.createElement(Select.Option, { value: "flash" }, "Flash"))),
type === 'none' ? null : (React.createElement(React.Fragment, null,
React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: "Auto Play", colon: false, name: "animation.autoplay", valuePropName: "checked", initialValue: data.animation.autoplay || false },
React.createElement(Switch, { size: "small" }))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: "Loop", colon: false, name: "animation.loop", valuePropName: "checked", initialValue: data.animation.loop || false },
React.createElement(Switch, { size: "small" })))),
type !== 'shake' ? (React.createElement(Row, null,
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: "Delay", colon: false, name: "animation.delay", initialValue: data.animation.delay || 100, rules: [{ type: 'number', min: 100, max: 5000 }] },
React.createElement(Slider, { min: 100, max: 5000, step: 100 }))),
React.createElement(Col, { span: 12 },
React.createElement(Form.Item, { label: "Duration", colon: false, name: "animation.duration", initialValue: data.animation.duration || 1000, rules: [{ type: 'number', min: 100, max: 5000 }] },
React.createElement(Slider, { min: 100, max: 5000, step: 100 }))))) : null,
this.getComponentType(type, data),
React.createElement(Form.Item, { label: "Playback", colon: false },
React.createElement(Row, null,
React.createElement(Col, { span: 8 },
React.createElement(Button, { onClick: () => {
canvasRef.handler.animationHandler.play(data.id);
} }, "Start")),
React.createElement(Col, { span: 8 },
React.createElement(Button, { onClick: () => {
canvasRef.handler.animationHandler.pause(data.id);
} }, "Pause")),
React.createElement(Col, { span: 8 },
React.createElement(Button, { onClick: () => {
canvasRef.handler.animationHandler.stop(data.id);
} }, "Stop"))))))));
},
getComponentType(type, data) {
let component;
if (type === 'fade') {
component = (React.createElement(Form.Item, { label: "Opacity", colon: false, name: "animation.opacity", initialValue: data.animation.opacity || 0, rules: [{ type: 'number', min: 0, max: 1 }] },
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: "Bounce Type", colon: false, name: "animation.bounce", initialValue: data.animation.bounce || 'horizontal' },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "horizontal" }, "Horizontal"),
React.createElement(Select.Option, { value: "vertical" }, "Vertical"))),
React.createElement(Form.Item, { label: "Offset", colon: false, name: "animation.offset", initialValue: data.animation.offset || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
React.createElement(Slider, { min: 1, max: 10, step: 1 }))));
}
else if (type === 'shake') {
component = (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: "Shake Type", colon: false, name: "animation.shake", initialValue: data.animation.shake || 'horizontal' },
React.createElement(Select, null,
React.createElement(Select.Option, { value: "horizontal" }, "Horizontal"),
React.createElement(Select.Option, { value: "vertical" }, "Vertical"))),
React.createElement(Form.Item, { label: "Offset", colon: false, name: "animation.offset", initialValue: data.animation.offset || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
React.createElement(Slider, { min: 1, max: 10, step: 1 }))));
}
else if (type === 'scaling') {
component = (React.createElement(Form.Item, { label: "Scaling", colon: false, name: "animation.scale", initialValue: data.animation.scale || 1, rules: [{ type: 'number', min: 1, max: 5 }] },
React.createElement(Slider, { min: 1, max: 5, step: 0.1 })));
}
else if (type === 'rotation') {
component = (React.createElement(Form.Item, { label: "Angle", colon: false, name: "animation.angle", initialValue: data.animation.angle || data.angle, rules: [{ type: 'number', min: 0, max: 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: "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: "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: "Value", colon: false, name: "animation.value", initialValue: data.animation.value || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
React.createElement(InputNumber, { min: 1, max: 10 })))));
}
return component;
},
};