plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
87 lines (86 loc) • 11.5 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const i18next_1 = __importDefault(require("i18next"));
const flex_1 = require("../flex");
const ImageMapList_1 = __importDefault(require("./ImageMapList"));
const common_1 = require("../common");
const Icon_1 = __importDefault(require("../icon/Icon"));
const antd_1 = require("antd");
let ImageMapHeaderToolbar = /** @class */ (() => {
class ImageMapHeaderToolbar extends react_1.Component {
render() {
var _a, _b, _c, _d, _e, _f;
const { canvasRef, selectedItem, onUpload, onSave, editing, onMigrate } = this.props;
const isCropping = canvasRef ? ((_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.interactionMode) === 'crop' : false;
return (react_1.default.createElement(flex_1.Flex, { className: "rde-editor-header-toolbar-container", flex: "1" },
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-list" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "layer-group" }),
react_1.default.createElement("div", { className: "rde-canvas-list" },
react_1.default.createElement(ImageMapList_1.default, { canvasRef: canvasRef, selectedItem: selectedItem }))),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-alignment" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.bringForward(); }, icon: "angle-up", tooltipTitle: i18next_1.default.t('action.bring-forward') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.sendBackwards(); }, icon: "angle-down", tooltipTitle: i18next_1.default.t('action.send-backwards') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.bringToFront(); }, icon: "angle-double-up", tooltipTitle: i18next_1.default.t('action.bring-to-front') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.sendToBack(); }, icon: "angle-double-down", tooltipTitle: i18next_1.default.t('action.send-to-back') })),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-alignment" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.alignmentHandler.left(); }, icon: "align-left", tooltipTitle: i18next_1.default.t('action.align-left') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.alignmentHandler.center(); }, icon: "align-center", tooltipTitle: i18next_1.default.t('action.align-center') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.alignmentHandler.right(); }, icon: "align-right", tooltipTitle: i18next_1.default.t('action.align-right') })),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-group" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.toGroup(); }, icon: "object-group", tooltipTitle: i18next_1.default.t('action.object-group') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.toActiveSelection(); }, icon: "object-ungroup", tooltipTitle: i18next_1.default.t('action.object-ungroup') })),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-crop" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: canvasRef ? !((_b = canvasRef.handler) === null || _b === void 0 ? void 0 : _b.cropHandler.validType()) : true, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.cropHandler.start(); }, icon: "crop", tooltipTitle: i18next_1.default.t('action.crop') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: canvasRef ? !((_c = canvasRef.handler) === null || _c === void 0 ? void 0 : _c.cropHandler.cropRect) : true, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.cropHandler.finish(); }, icon: "check", tooltipTitle: i18next_1.default.t('action.crop-save') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: canvasRef ? !((_d = canvasRef.handler) === null || _d === void 0 ? void 0 : _d.cropHandler.cropRect) : true, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.cropHandler.cancel(); }, icon: "times", tooltipTitle: i18next_1.default.t('action.crop-cancel') })),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-operation" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.saveImage(); }, icon: "image", tooltipTitle: i18next_1.default.t('action.image-save') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.duplicate(); }, icon: "clone", tooltipTitle: i18next_1.default.t('action.clone') }),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", disabled: isCropping, onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.remove(); }, icon: "trash", tooltipTitle: i18next_1.default.t('action.delete') })),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-history" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", disabled: isCropping || (canvasRef && !((_e = canvasRef.handler) === null || _e === void 0 ? void 0 : _e.transactionHandler.undos.length)), onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.transactionHandler.undo(); }, tooltipTitle: i18next_1.default.t('action.undo') },
react_1.default.createElement(Icon_1.default, { name: "undo-alt" })),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", disabled: isCropping || (canvasRef && !((_f = canvasRef.handler) === null || _f === void 0 ? void 0 : _f.transactionHandler.redos.length)), onClick: () => { var _a; return (_a = canvasRef.handler) === null || _a === void 0 ? void 0 : _a.transactionHandler.redo(); }, tooltipTitle: i18next_1.default.t('action.redo') },
react_1.default.createElement(Icon_1.default, { name: "redo-alt" }))),
react_1.default.createElement(flex_1.Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-action" },
onMigrate && (react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "exchange-alt", tooltipTitle: i18next_1.default.t('action.migrate'), onClick: onMigrate, tooltipPlacement: "bottomRight" })),
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "save", disabled: !editing, tooltipTitle: i18next_1.default.t('action.download'), onClick: onSave, tooltipPlacement: "bottomRight" }),
editing ? (react_1.default.createElement(antd_1.Popconfirm, { title: i18next_1.default.t('imagemap.imagemap-editing-confirm'), okText: i18next_1.default.t('action.ok'), cancelText: i18next_1.default.t('action.cancel'), onConfirm: onUpload, placement: "bottomRight" },
react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "retweet", tooltipTitle: i18next_1.default.t('action.upload'), tooltipPlacement: "bottomRight" }))) : (react_1.default.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "retweet", tooltipTitle: i18next_1.default.t('action.upload'), tooltipPlacement: "bottomRight", onClick: onUpload })))));
}
}
ImageMapHeaderToolbar.propTypes = {
canvasRef: prop_types_1.default.any,
selectedItem: prop_types_1.default.object,
onUpload: prop_types_1.default.func.isRequired,
editing: prop_types_1.default.bool.isRequired,
onSave: prop_types_1.default.func.isRequired,
onMigrate: prop_types_1.default.func,
};
return ImageMapHeaderToolbar;
})();
exports.default = ImageMapHeaderToolbar;