merchi_product_editor/dist/components/ProductPreviews.js

A React component for editing product images using Fabric.js

"use strict";
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (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 (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var ImageZoomModal_1 = __importDefault(require("./ImageZoomModal"));
require("../styles/ProductEditor.css");
require("../styles/BottomPreviewDisplay.css");
var ProductEditorContext_1 = require("../context/ProductEditorContext");
var draftTemplateUtils_1 = require("../utils/draftTemplateUtils");
var psdRenderUtils_1 = require("../utils/psdRenderUtils");
var ProductPreviews = function () {
    var _a, _b;
    var _c = (0, ProductEditorContext_1.useProductEditor)(), draftTemplates = _c.draftTemplates, draftPreviews = _c.draftPreviews, loadingPreviews = _c.loadingPreviews, renderedDraftPreviews = _c.renderedDraftPreviews;
    var _d = (0, react_1.useState)(false), isModalOpen = _d[0], setIsModalOpen = _d[1];
    var _e = (0, react_1.useState)(0), selectedPreviewIndex = _e[0], setSelectedPreviewIndex = _e[1];
    var _f = (0, react_1.useState)([]), renderedPreviews = _f[0], setRenderedPreviews = _f[1];
    var _g = (0, react_1.useState)(false), isProcessing = _g[0], setIsProcessing = _g[1];
    // Use refs instead of state to track processed data without causing re-renders
    var processedPreviewIdsRef = (0, react_1.useRef)(new Set());
    // Track which template versions we've already processed
    var processedTemplateVersionsRef = (0, react_1.useRef)(new Map());
    // For debugging
    var renderCountRef = (0, react_1.useRef)(0);
    // Track if this is first mount
    var isFirstMountRef = (0, react_1.useRef)(true);
    // When mappedPreviews or renderedDraftPreviews changes, update our rendered PNGs
    (0, react_1.useEffect)(function () {
        // Skip first render to avoid processing before renderedDraftPreviews are available
        if (isFirstMountRef.current) {
            isFirstMountRef.current = false;
            return;
        }
        renderCountRef.current++;
        var processPreviewsWithLayers = function () { return __awaiter(void 0, void 0, void 0, function () {
            var mappedPreviews, changedTemplateIds, previewsToProcess, processedResults_1, error_1;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        // Skip if we're already processing or if we don't have previews
                        if (isProcessing || !draftPreviews || draftPreviews.length === 0) {
                            return [2 /*return*/];
                        }
                        mappedPreviews = (0, draftTemplateUtils_1.mapPreviewsWithRendered)(draftTemplates, draftPreviews, renderedDraftPreviews);
                        // Skip if there are no mappedPreviews to process
                        if (!mappedPreviews || mappedPreviews.length === 0) {
                            return [2 /*return*/];
                        }
                        changedTemplateIds = new Set();
                        renderedDraftPreviews.forEach(function (rdp) {
                            var templateId = rdp.templateId;
                            var templateVersion = rdp.draft; // Use the image data URL as a version identifier
                            var previousVersion = processedTemplateVersionsRef.current.get(templateId);
                            if (previousVersion !== templateVersion) {
                                changedTemplateIds.add(templateId);
                                // Update the stored version
                                processedTemplateVersionsRef.current.set(templateId, templateVersion);
                            }
                        });
                        previewsToProcess = mappedPreviews.filter(function (mp) {
                            var previewId = mp.draftPreview.id;
                            // Always process if we haven't processed this preview yet
                            if (!processedPreviewIdsRef.current.has(previewId)) {
                                return true;
                            }
                            // If no templates have changed, skip reprocessing
                            if (changedTemplateIds.size === 0) {
                                return false;
                            }
                            // Check if this preview uses any templates that have changed
                            var shouldProcess = mp.draftPreviewLayers.some(function (layer) {
                                return layer.renderedLayer && changedTemplateIds.has(layer.renderedLayer.templateId);
                            });
                            return shouldProcess;
                        });
                        // Skip if there's nothing new to process
                        if (previewsToProcess.length === 0) {
                            return [2 /*return*/];
                        }
                        setIsProcessing(true);
                        _a.label = 1;
                    case 1:
                        _a.trys.push([1, 3, 4, 5]);
                        return [4 /*yield*/, (0, psdRenderUtils_1.renderDraftPreviewsWithLayers)(previewsToProcess)];
                    case 2:
                        processedResults_1 = _a.sent();
                        // Update our rendered previews state
                        setRenderedPreviews(function (prevRendered) {
                            var newRendered = __spreadArray([], prevRendered, true);
                            processedResults_1.forEach(function (result) {
                                var existingIndex = newRendered.findIndex(function (r) { return r.draftPreviewId === result.draftPreviewId; });
                                if (existingIndex !== -1) {
                                    // Update existing preview
                                    newRendered[existingIndex] = result;
                                }
                                else {
                                    // Add new preview
                                    newRendered.push(result);
                                }
                            });
                            return newRendered;
                        });
                        // Update our processed IDs ref (not state)
                        processedResults_1.forEach(function (result) {
                            if (result.draftPreviewId !== undefined) {
                                processedPreviewIdsRef.current.add(result.draftPreviewId);
                            }
                        });
                        return [3 /*break*/, 5];
                    case 3:
                        error_1 = _a.sent();
                        console.error('Failed to process previews with layers:', error_1);
                        return [3 /*break*/, 5];
                    case 4:
                        setIsProcessing(false);
                        return [7 /*endfinally*/];
                    case 5: return [2 /*return*/];
                }
            });
        }); };
        processPreviewsWithLayers();
    }, [draftTemplates, draftPreviews, renderedDraftPreviews, isProcessing]);
    // One-time initialization to handle initial rendering of previews 
    // when component mounts and renderedDraftPreviews are available
    (0, react_1.useEffect)(function () {
        if ((draftPreviews === null || draftPreviews === void 0 ? void 0 : draftPreviews.length) > 0 && (renderedDraftPreviews === null || renderedDraftPreviews === void 0 ? void 0 : renderedDraftPreviews.length) > 0 && renderedPreviews.length === 0) {
            var mappedPreviews_1 = (0, draftTemplateUtils_1.mapPreviewsWithRendered)(draftTemplates, draftPreviews, renderedDraftPreviews);
            if ((mappedPreviews_1 === null || mappedPreviews_1 === void 0 ? void 0 : mappedPreviews_1.length) > 0) {
                (function () { return __awaiter(void 0, void 0, void 0, function () {
                    var processedResults, error_2;
                    return __generator(this, function (_a) {
                        switch (_a.label) {
                            case 0:
                                setIsProcessing(true);
                                _a.label = 1;
                            case 1:
                                _a.trys.push([1, 3, 4, 5]);
                                return [4 /*yield*/, (0, psdRenderUtils_1.renderDraftPreviewsWithLayers)(mappedPreviews_1)];
                            case 2:
                                processedResults = _a.sent();
                                // Store initial results
                                setRenderedPreviews(processedResults);
                                // Mark these previews as processed
                                processedResults.forEach(function (result) {
                                    if (result.draftPreviewId !== undefined) {
                                        processedPreviewIdsRef.current.add(result.draftPreviewId);
                                    }
                                });
                                // Store initial template versions
                                renderedDraftPreviews.forEach(function (rdp) {
                                    processedTemplateVersionsRef.current.set(rdp.templateId, rdp.draft);
                                });
                                return [3 /*break*/, 5];
                            case 3:
                                error_2 = _a.sent();
                                console.error('[Initialization] Error processing previews:', error_2);
                                return [3 /*break*/, 5];
                            case 4:
                                setIsProcessing(false);
                                return [7 /*endfinally*/];
                            case 5: return [2 /*return*/];
                        }
                    });
                }); })();
            }
        }
    }, [draftPreviews, renderedDraftPreviews, draftTemplates, renderedPreviews.length]);
    var openModal = function (index) {
        setSelectedPreviewIndex(index);
        setIsModalOpen(true);
    };
    var closeModal = function () {
        setIsModalOpen(false);
    };
    // Determine the URL to display for each preview
    var previewUrlsForDisplay = draftPreviews.length > 0
        ? draftPreviews.map(function (preview) {
            // If we have a rendered PNG for this preview, use it
            var renderedPreview = renderedPreviews.find(function (rp) { return rp.draftPreviewId === preview.id; });
            return (renderedPreview === null || renderedPreview === void 0 ? void 0 : renderedPreview.pngDataUrl) || '';
        })
        : renderedDraftPreviews.map(function (preview) {
            // If we have a rendered PNG for this preview, use it
            return preview.canvasPreview;
        });
    var previews = (draftPreviews === null || draftPreviews === void 0 ? void 0 : draftPreviews.length) > 0 ? draftPreviews : renderedDraftPreviews;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        !isModalOpen && (react_1.default.createElement("div", { className: "bottom-preview-section" },
            react_1.default.createElement("div", { className: "preview-images" }, previews.map(function (preview, index) {
                var _a;
                return loadingPreviews || isProcessing ? (react_1.default.createElement("div", { key: "loading-".concat(preview.id || index), className: 'preview-image-box' },
                    react_1.default.createElement("div", { className: "preview-image-box-loading-spinner" }))) : (react_1.default.createElement("div", { key: preview.id || "preview-".concat(index), className: "preview-image-box", onClick: function () { return openModal(index); }, style: {
                        backgroundImage: "url(".concat(previewUrlsForDisplay[index] || ((_a = preview.file) === null || _a === void 0 ? void 0 : _a.viewUrl) || '', ")"),
                        backgroundSize: 'contain',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center center'
                    }, title: "Preview ".concat(index + 1) }));
            })))),
        react_1.default.createElement(ImageZoomModal_1.default, { isOpen: isModalOpen, onClose: closeModal, imageUrl: previewUrlsForDisplay[selectedPreviewIndex] || ((_b = (_a = previews[selectedPreviewIndex]) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.viewUrl) || '', productName: "Preview", totalImages: previews.length, currentIndex: selectedPreviewIndex, allImages: previews.map(function (preview, index) { return (__assign(__assign({}, preview), { key: preview.id || "modal-preview-".concat(index) })); }) })));
};
exports.default = ProductPreviews;