merchi_product_editor
Version:
A React component for editing product images using Fabric.js
67 lines (66 loc) • 3.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.mapPreviewsWithRendered = exports.haveDraftTemplatesChanged = void 0;
/**
* Compares two arrays of draft templates to determine if they've changed significantly
* This helps prevent unnecessary re-renders and infinite loops
*
* @param oldTemplates The previous draft templates array
* @param newTemplates The new draft templates array
* @returns True if templates have changed, false if they're effectively the same
*/
function haveDraftTemplatesChanged(oldTemplates, newTemplates) {
// Quick length check
if (!oldTemplates || !newTemplates)
return true;
if (oldTemplates.length !== newTemplates.length)
return true;
// Check if template IDs are the same and in the same order
var oldIds = oldTemplates.map(function (dt) { return dt.template.id; }).join(',');
var newIds = newTemplates.map(function (dt) { return dt.template.id; }).join(',');
if (oldIds !== newIds)
return true;
// Deep check each template for significant changes
for (var i = 0; i < oldTemplates.length; i++) {
var oldTemplate = oldTemplates[i];
var newTemplate = newTemplates[i];
// Check for template property changes
if (oldTemplate.template.id !== newTemplate.template.id)
return true;
if (oldTemplate.template.name !== newTemplate.template.name)
return true;
if (oldTemplate.template.width !== newTemplate.template.width)
return true;
if (oldTemplate.template.height !== newTemplate.template.height)
return true;
// Check variation objects count
if (oldTemplate.variationObjects.length !== newTemplate.variationObjects.length)
return true;
// We could do more detailed checking of variation objects here,
// but for performance we'll assume if counts are the same and template properties
// are the same, the variations probably haven't changed enough to warrant a full re-render
}
// Templates are effectively the same
return false;
}
exports.haveDraftTemplatesChanged = haveDraftTemplatesChanged;
function mapPreviewsWithRendered(draftTemplates, draftPreviews, renderedDraftPreviews) {
return draftPreviews.map(function (draftPreview) {
// Map each draftTemplate to its associated layers and rendered layers
var draftPreviewLayers = draftTemplates.flatMap(function (dTD) {
var _a;
var layers = ((_a = dTD === null || dTD === void 0 ? void 0 : dTD.template) === null || _a === void 0 ? void 0 : _a.draftPreviewLayers) || [];
return layers
.filter(function (dPL) { var _a; return ((_a = dPL === null || dPL === void 0 ? void 0 : dPL.draftPreview) === null || _a === void 0 ? void 0 : _a.id) === draftPreview.id; })
.map(function (layer) {
var renderedLayer = renderedDraftPreviews.find(function (rDR) { var _a; return (rDR === null || rDR === void 0 ? void 0 : rDR.templateId) === ((_a = dTD === null || dTD === void 0 ? void 0 : dTD.template) === null || _a === void 0 ? void 0 : _a.id); });
return { layerName: layer === null || layer === void 0 ? void 0 : layer.layerName, renderedLayer: renderedLayer || null };
});
});
return {
draftPreview: draftPreview,
draftPreviewLayers: draftPreviewLayers,
};
});
}
exports.mapPreviewsWithRendered = mapPreviewsWithRendered;