merchi_product_editor
Version:
A React component for editing product images using Fabric.js
68 lines (67 loc) • 4.99 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 ProductEditorContext_1 = require("../context/ProductEditorContext");
var FloatingToolbar_1 = __importDefault(require("./FloatingToolbar"));
var ProductPreviews_1 = __importDefault(require("./ProductPreviews"));
var Toolbar_1 = __importDefault(require("./Toolbar"));
var LoadingOverlay_1 = __importDefault(require("./LoadingOverlay"));
var TextToolbar_1 = __importDefault(require("./TextToolbar"));
var LayerPanel_1 = __importDefault(require("./LayerPanel"));
require("../styles/ProductEditor.css");
var ProductEditor = function () {
var _a = (0, ProductEditorContext_1.useProductEditor)(), canvasRef = _a.canvasRef, draftTemplates = _a.draftTemplates, groupIndex = _a.groupIndex, handleTemplateChange = _a.handleTemplateChange, isMobileView = _a.isMobileView, selectedTemplate = _a.selectedTemplate, showPreview = _a.showPreview, inputName = _a.inputName, isCanvasLoading = _a.isCanvasLoading, hookForm = _a.hookForm, selectedTextObject = _a.selectedTextObject, showLayerPanel = _a.showLayerPanel, renderedDraftPreviews = _a.renderedDraftPreviews;
var disableCanvasEvents = function (e) {
if (e.target.closest('.floating-toolbar') ||
e.target.closest('.bottom-preview-section') ||
e.target.closest('.mobile-bottom-toolbar')) {
return;
}
e.stopPropagation();
};
var getTemplatePreviewImage = function (templateId) {
if (!templateId)
return null;
var renderedPreview = renderedDraftPreviews === null || renderedDraftPreviews === void 0 ? void 0 : renderedDraftPreviews.find(function (preview) { return preview.templateId === templateId; });
if (renderedPreview === null || renderedPreview === void 0 ? void 0 : renderedPreview.canvasPreview) {
return renderedPreview.canvasPreview;
}
return null;
};
var register = hookForm === null || hookForm === void 0 ? void 0 : hookForm.register;
return (react_1.default.createElement("div", { className: "product-editor" },
register && (react_1.default.createElement("input", __assign({}, register(inputName), { type: 'hidden' }))),
!isCanvasLoading && draftTemplates.length > 0 && (react_1.default.createElement("div", { className: "template-buttons" }, draftTemplates.map(function (_a) {
var _b;
var template = _a.template;
return (react_1.default.createElement("div", { key: template.id, className: "template-button ".concat(selectedTemplate === template.id ? 'selected' : ''), onClick: function () { return handleTemplateChange(template); } },
!isMobileView && (getTemplatePreviewImage(template.id) || (template.file && template.file.viewUrl)) && (react_1.default.createElement("img", { src: getTemplatePreviewImage(template.id) || (((_b = template.file) === null || _b === void 0 ? void 0 : _b.viewUrl) || ''), alt: template.name || "Template ".concat(template.id), className: "template-thumbnail" })),
react_1.default.createElement("span", { className: "template-name" }, template.name || "Template ".concat(template.id))));
}))),
react_1.default.createElement("div", { className: "main-editor-layout", style: { position: 'relative' } },
react_1.default.createElement(LoadingOverlay_1.default, { isLoading: isCanvasLoading, className: "canvas-loading" }),
react_1.default.createElement("div", { className: "editor-container ".concat(isMobileView && showPreview ? 'has-bottom-padding' : '') },
selectedTextObject && react_1.default.createElement(TextToolbar_1.default, null),
react_1.default.createElement("div", { className: "canvas-area", onClick: disableCanvasEvents },
react_1.default.createElement("canvas", { ref: canvasRef })),
!isMobileView && !isCanvasLoading && react_1.default.createElement(FloatingToolbar_1.default, null),
showLayerPanel && react_1.default.createElement(LayerPanel_1.default, null)),
showPreview && react_1.default.createElement(ProductPreviews_1.default, null)),
isMobileView && !isCanvasLoading && (react_1.default.createElement("div", { className: "mobile-bottom-toolbar" },
react_1.default.createElement(Toolbar_1.default, null)))));
};
exports.default = ProductEditor;