merchi_product_editor
Version:
A React component for editing product images using Fabric.js
116 lines (115 loc) • 6.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.initDraftTemplates = exports.canvasTemplateVariationObjects = exports.buildVariationFieldCanvasObject = exports.filterVariationsByTemplate = exports.findTemplatesSelectedByVarations = exports.generateUniqueId = void 0;
var types_1 = require("../types");
// Add a UUID generator for unique IDs
var generateUniqueId = function () {
return 'canvas-obj-' + Math.random().toString(36).substring(2, 11) + Date.now().toString(36);
};
exports.generateUniqueId = generateUniqueId;
function findTemplatesSelectedByVarations(draftTemplates, variations) {
// filter all the selected variation values
var selectedVarationValues = variations
.filter(function (v) { return v.value !== undefined && v.value !== null && v.value !== ''; })
.map(function (v) { return String(v.value); });
// return all the draft templates that have a selectedByVariationFieldOptions that includes
// any of the selected variation values
return draftTemplates.filter(function (template) {
var _a;
if (!(template === null || template === void 0 ? void 0 : template.selectedByVariationFieldOptions)) {
return false;
}
return !!((_a = template.selectedByVariationFieldOptions) === null || _a === void 0 ? void 0 : _a.find(function (o) { return selectedVarationValues.includes(String(o.id)); }));
});
}
exports.findTemplatesSelectedByVarations = findTemplatesSelectedByVarations;
function filterVariationsByTemplate(variations, template) {
var _a;
// filter the variations by the template and only return the variations which edit the template
// we will use these variations to add canvas objects to the canvas
var editFieldIds = (_a = template.editedByVariationFields) === null || _a === void 0 ? void 0 : _a.map(function (field) { return field.id; });
return variations.filter(function (v) { var _a; return editFieldIds === null || editFieldIds === void 0 ? void 0 : editFieldIds.includes((_a = v.variationField) === null || _a === void 0 ? void 0 : _a.id); });
}
exports.filterVariationsByTemplate = filterVariationsByTemplate;
function buildVariationFieldCanvasObject(variation) {
// takes a variation and returns an associated canvas object to redner
var value = variation.value, variationField = variation.variationField, _a = variation.variationFiles, variationFiles = _a === void 0 ? [] : _a;
var _b = variationField || {}, _c = _b.fieldType, fieldType = _c === void 0 ? types_1.FieldType.TEXT_INPUT : _c, id = _b.id;
if ([types_1.FieldType.TEXT_INPUT, types_1.FieldType.TEXT_AREA, types_1.FieldType.NUMBER_INPUT].includes(fieldType)) {
// if value is null or empty, do not create a text object
if (value === null || value === undefined || value === '') {
return {
fieldId: id,
value: null,
uniqueId: (0, exports.generateUniqueId)()
};
}
// Used to add a text to the canvas
return [{
canvasObjectType: 'text',
value: value,
fieldId: id,
text: value,
fontSize: 24,
fontFamily: 'Nunito',
uniqueId: (0, exports.generateUniqueId)(),
}];
}
if (fieldType === types_1.FieldType.FILE_UPLOAD) {
// Used to add an image to the canvas
return variationFiles.map(function (file) { return ({
canvasObjectType: 'image',
fieldId: id,
fileId: file.id,
value: value,
file: file,
uniqueId: (0, exports.generateUniqueId)(),
}); });
}
if ([types_1.FieldType.COLOUR_PICKER, types_1.FieldType.COLOUR_SELECT].includes(fieldType)) {
// Used to add a colour to the canvas
return [{
canvasObjectType: 'colour',
fieldId: id,
value: value,
colour: value,
uniqueId: (0, exports.generateUniqueId)(),
}];
}
return [{
fieldId: id,
value: value,
uniqueId: (0, exports.generateUniqueId)(),
}];
}
exports.buildVariationFieldCanvasObject = buildVariationFieldCanvasObject;
function canvasTemplateVariationObjects(variations, template) {
// takes a list of variations and a template and returns a list of canvas objects to render
var templateVariations = filterVariationsByTemplate(variations, template);
return templateVariations
.flatMap(function (v) { return buildVariationFieldCanvasObject(v); })
.filter(function (obj) { return obj.canvasObjectType; });
}
exports.canvasTemplateVariationObjects = canvasTemplateVariationObjects;
function initDraftTemplates(variations, product) {
var _a = product.draftTemplates, draftTemplates = _a === void 0 ? [] : _a;
// Check for any templates that are selected by the variation options
var templates = findTemplatesSelectedByVarations(draftTemplates, variations) || [];
// If there are no templates selected, return the draft templates
var useTemplates = templates.length ? templates : draftTemplates;
return useTemplates.map(function (template) {
// find the variations which edit the template
var templateVariations = filterVariationsByTemplate(variations, template);
// build the canvas objects for the template
var variationObjects = canvasTemplateVariationObjects(templateVariations, template);
return {
template: template,
variationFieldIds: templateVariations
.map(function (v) { var _a; return (_a = v.variationField) === null || _a === void 0 ? void 0 : _a.id; })
.filter(Boolean)
.map(function (id) { return Number(id); }),
variationObjects: variationObjects,
};
});
}
exports.initDraftTemplates = initDraftTemplates;