plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
114 lines (113 loc) • 10.1 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("../../common/ColorPicker"));
const Icon_1 = __importDefault(require("../../icon/Icon"));
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: i18next_1.default.t('imagemap.animation.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" }, 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, name: "animation.autoplay", 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, name: "animation.loop", 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, name: "animation.delay", 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, name: "animation.duration", initialValue: data.animation.duration },
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: 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) {
let component;
if (type === 'fade') {
component = (react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.opacity'), colon: false, name: "animation.opacity", 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, name: "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" }, 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, name: "animation.offset", 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, name: "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, name: "animation.offset", 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, name: "animation.scale", 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, name: "animation.angle", 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, 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: i18next_1.default.t('imagemap.style.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: i18next_1.default.t('common.value'), colon: false, name: "animation.value", initialValue: data.animation.value || 1 },
react_1.default.createElement(antd_1.InputNumber, { min: 1, max: 10 })))));
}
return component;
},
};