plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
106 lines (105 loc) • 8.88 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 ColorPicker_1 = __importDefault(require("../../common/ColorPicker"));
exports.default = {
render(canvasRef, form, data) {
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: "Animation Type", colon: false, name: "animation.type", initialValue: type },
react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "none" }, "None"),
react_1.default.createElement(antd_1.Select.Option, { value: "fade" }, "Fade"),
react_1.default.createElement(antd_1.Select.Option, { value: "bounce" }, "Bounce"),
react_1.default.createElement(antd_1.Select.Option, { value: "shake" }, "Shake"),
react_1.default.createElement(antd_1.Select.Option, { value: "scaling" }, "Scaling"),
react_1.default.createElement(antd_1.Select.Option, { value: "rotation" }, "Rotation"),
react_1.default.createElement(antd_1.Select.Option, { value: "flash" }, "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: "Auto Play", colon: false, name: "animation.autoplay", valuePropName: "checked", initialValue: data.animation.autoplay || false },
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: "Loop", colon: false, name: "animation.loop", valuePropName: "checked", initialValue: data.animation.loop || false },
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: "Delay", colon: false, name: "animation.delay", initialValue: data.animation.delay || 100, rules: [{ type: 'number', min: 100, max: 5000 }] },
react_1.default.createElement(antd_1.Slider, { min: 100, max: 5000, step: 100 }))),
react_1.default.createElement(antd_1.Col, { span: 12 },
react_1.default.createElement(antd_1.Form.Item, { label: "Duration", colon: false, name: "animation.duration", initialValue: data.animation.duration || 1000, rules: [{ type: 'number', min: 100, max: 5000 }] },
react_1.default.createElement(antd_1.Slider, { min: 100, max: 5000, step: 100 }))))) : null,
this.getComponentType(type, data),
react_1.default.createElement(antd_1.Form.Item, { label: "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, { onClick: () => {
canvasRef.handler.animationHandler.play(data.id);
} }, "Start")),
react_1.default.createElement(antd_1.Col, { span: 8 },
react_1.default.createElement(antd_1.Button, { onClick: () => {
canvasRef.handler.animationHandler.pause(data.id);
} }, "Pause")),
react_1.default.createElement(antd_1.Col, { span: 8 },
react_1.default.createElement(antd_1.Button, { onClick: () => {
canvasRef.handler.animationHandler.stop(data.id);
} }, "Stop"))))))));
},
getComponentType(type, data) {
let component;
if (type === 'fade') {
component = (react_1.default.createElement(antd_1.Form.Item, { label: "Opacity", colon: false, name: "animation.opacity", initialValue: data.animation.opacity || 0, rules: [{ type: 'number', min: 0, max: 1 }] },
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: "Bounce Type", colon: false, name: "animation.bounce", initialValue: data.animation.bounce || 'horizontal' },
react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "horizontal" }, "Horizontal"),
react_1.default.createElement(antd_1.Select.Option, { value: "vertical" }, "Vertical"))),
react_1.default.createElement(antd_1.Form.Item, { label: "Offset", colon: false, name: "animation.offset", initialValue: data.animation.offset || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
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: "Shake Type", colon: false, name: "animation.shake", initialValue: data.animation.shake || 'horizontal' },
react_1.default.createElement(antd_1.Select, null,
react_1.default.createElement(antd_1.Select.Option, { value: "horizontal" }, "Horizontal"),
react_1.default.createElement(antd_1.Select.Option, { value: "vertical" }, "Vertical"))),
react_1.default.createElement(antd_1.Form.Item, { label: "Offset", colon: false, name: "animation.offset", initialValue: data.animation.offset || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
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: "Scaling", colon: false, name: "animation.scale", initialValue: data.animation.scale || 1, rules: [{ type: 'number', min: 1, max: 5 }] },
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: "Angle", colon: false, name: "animation.angle", initialValue: data.animation.angle || data.angle, rules: [{ type: 'number', min: 0, max: 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: "Fill Color", colon: false, name: "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: "Stroke Color", colon: false, name: "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: "Value", colon: false, name: "animation.value", initialValue: data.animation.value || 1, rules: [{ type: 'number', min: 1, max: 10 }] },
react_1.default.createElement(antd_1.InputNumber, { min: 1, max: 10 })))));
}
return component;
},
};