merchi_product_editor
Version:
A React component for editing product images using Fabric.js
34 lines (33 loc) • 2.06 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;
// 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); };
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: "toolbar-content" },
react_1.default.createElement("div", { className: "toolbar-button" },
react_1.default.createElement(grommet_icons_1.Undo, { width: 24, height: 24 }),
react_1.default.createElement("span", null, "Undo")),
react_1.default.createElement("div", { className: "toolbar-button", onClick: handleAddText },
react_1.default.createElement(grommet_icons_1.Redo, { width: 24, height: 24 }),
react_1.default.createElement("span", null, "Redo")))));
}
exports.default = Toolbar;