plot-plan-designer/lib/esm/components/imagemap/ImageMapHeaderToolbar.js

Design Editor Tools with React.js + ant.design + fabric.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import i18n from 'i18next';
import { Flex } from '../flex';
import ImageMapList from './ImageMapList';
import { CommonButton } from '../common';
import Icon from '../icon/Icon';
import { Popconfirm } from 'antd';
class ImageMapHeaderToolbar extends 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.createElement(Flex, { className: "rde-editor-header-toolbar-container", flex: "1" },
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-list" },
                React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "layer-group" }),
                React.createElement("div", { className: "rde-canvas-list" },
                    React.createElement(ImageMapList, { canvasRef: canvasRef, selectedItem: selectedItem }))),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-alignment" },
                React.createElement(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: i18n.t('action.bring-forward') }),
                React.createElement(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: i18n.t('action.send-backwards') }),
                React.createElement(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: i18n.t('action.bring-to-front') }),
                React.createElement(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: i18n.t('action.send-to-back') })),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-alignment" },
                React.createElement(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: i18n.t('action.align-left') }),
                React.createElement(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: i18n.t('action.align-center') }),
                React.createElement(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: i18n.t('action.align-right') })),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-group" },
                React.createElement(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: i18n.t('action.object-group') }),
                React.createElement(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: i18n.t('action.object-ungroup') })),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-crop" },
                React.createElement(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: i18n.t('action.crop') }),
                React.createElement(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: i18n.t('action.crop-save') }),
                React.createElement(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: i18n.t('action.crop-cancel') })),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-operation" },
                React.createElement(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: i18n.t('action.image-save') }),
                React.createElement(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: i18n.t('action.clone') }),
                React.createElement(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: i18n.t('action.delete') })),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-history" },
                React.createElement(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: i18n.t('action.undo') },
                    React.createElement(Icon, { name: "undo-alt" })),
                React.createElement(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: i18n.t('action.redo') },
                    React.createElement(Icon, { name: "redo-alt" }))),
            React.createElement(Flex.Item, { className: "rde-canvas-toolbar rde-canvas-toolbar-action" },
                onMigrate && (React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "exchange-alt", tooltipTitle: i18n.t('action.migrate'), onClick: onMigrate, tooltipPlacement: "bottomRight" })),
                React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "save", disabled: !editing, tooltipTitle: i18n.t('action.download'), onClick: onSave, tooltipPlacement: "bottomRight" }),
                editing ? (React.createElement(Popconfirm, { title: i18n.t('imagemap.imagemap-editing-confirm'), okText: i18n.t('action.ok'), cancelText: i18n.t('action.cancel'), onConfirm: onUpload, placement: "bottomRight" },
                    React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "retweet", tooltipTitle: i18n.t('action.upload'), tooltipPlacement: "bottomRight" }))) : (React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "retweet", tooltipTitle: i18n.t('action.upload'), tooltipPlacement: "bottomRight", onClick: onUpload })))));
    }
}
ImageMapHeaderToolbar.propTypes = {
    canvasRef: PropTypes.any,
    selectedItem: PropTypes.object,
    onUpload: PropTypes.func.isRequired,
    editing: PropTypes.bool.isRequired,
    onSave: PropTypes.func.isRequired,
    onMigrate: PropTypes.func,
};
export default ImageMapHeaderToolbar;