merchi_product_editor
Version:
A React component for editing product images using Fabric.js
48 lines (47 loc) • 3.23 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var grommet_icons_1 = require("grommet-icons");
var ProductEditorContext_1 = require("../context/ProductEditorContext");
var canvasUtils_1 = require("../utils/canvasUtils");
require("../styles/Toolbar.css");
function Toolbar() {
var _a = (0, ProductEditorContext_1.useProductEditor)(), canvas = _a.canvas, width = _a.width, setShowGrid = _a.setShowGrid, showGrid = _a.showGrid, height = _a.height, showPreview = _a.showPreview, togglePreview = _a.togglePreview, showLayerPanel = _a.showLayerPanel, toggleLayerPanel = _a.toggleLayerPanel, deleteObject = _a.deleteObject, selectedObjectId = _a.selectedObjectId, renderedDraftPreviews = _a.renderedDraftPreviews;
// Add handleAddText function before the return statement
var handleAddText = function () {
if (!canvas)
return;
(0, canvasUtils_1.addTextToCanvas)(canvas, width, height);
};
var toggleGrid = function () { return setShowGrid(!showGrid); };
// Handle delete button click
var handleDelete = function () {
if (!canvas)
return;
var activeObject = canvas.getActiveObject();
if (activeObject) {
deleteObject(activeObject);
}
};
// Check if previews are available
var hasPreview = renderedDraftPreviews && renderedDraftPreviews.length > 0;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "grid-toggle" },
react_1.default.createElement("div", { className: "toolbar-button ".concat(showGrid ? 'active' : ''), onClick: toggleGrid },
react_1.default.createElement(grommet_icons_1.Apps, { width: 24, height: 24 }),
react_1.default.createElement("span", null, showGrid ? 'Hide Grid' : 'Show Grid'))),
react_1.default.createElement("div", { className: "preview-toggle" },
react_1.default.createElement("div", { className: "toolbar-button ".concat(showPreview && hasPreview ? 'active' : '', " ").concat(!hasPreview ? 'disabled' : ''), onClick: hasPreview ? togglePreview : undefined },
react_1.default.createElement(grommet_icons_1.View, { width: 24, height: 24 }),
react_1.default.createElement("span", null, hasPreview && showPreview ? 'Hide Preview' : 'Show Preview'))),
react_1.default.createElement("div", { className: "toolbar-button ".concat(showLayerPanel ? 'active' : ''), onClick: toggleLayerPanel },
react_1.default.createElement(grommet_icons_1.Layer, { width: 24, height: 24 }),
react_1.default.createElement("span", null, "Layer")),
react_1.default.createElement("div", { className: "toolbar-button ".concat(!selectedObjectId ? 'disabled' : ''), onClick: handleDelete },
react_1.default.createElement(grommet_icons_1.Trash, { width: 24, height: 24 }),
react_1.default.createElement("span", null, "Delete"))));
}
exports.default = Toolbar;