merchi_product_editor
Version:
A React component for editing product images using Fabric.js
107 lines (106 loc) • 5.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.addVariationsToCanvas = exports.initDraftTemplates = exports.canvasTemplateVariationObjects = exports.buildVariationFieldCanvasObject = exports.filterVariationsByTemplate = exports.findTemplatesSelectedByVarations = void 0;
var types_1 = require("../types");
var canvasUtils_1 = require("./canvasUtils");
function findTemplatesSelectedByVarations(draftTemplates, variations) {
// filter all the selected variation values
var selectedVarationValues = variations.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)) {
// Used to add a text to the canvas
return {
canvasObjectType: 'text',
value: value,
fieldId: id,
text: value,
fontSize: 24,
fontFamily: 'Nunito'
};
}
if (fieldType === types_1.FieldType.FILE_UPLOAD) {
// Used to add an image to the canvas
return {
canvasObjectType: 'image',
fieldId: id,
value: value,
files: variationFiles,
};
}
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,
};
}
return {
fieldId: id,
value: value,
};
}
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.map(function (v) { return buildVariationFieldCanvasObject(v); });
}
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,
variationObjects: variationObjects,
};
});
}
exports.initDraftTemplates = initDraftTemplates;
function addVariationsToCanvas(canvas, variations, template) {
// takes a canvas and a list of canvas objects and adds them to the canvas
var variationObjects = canvasTemplateVariationObjects(variations, template);
variationObjects.forEach(function (object) {
if (object.canvasObjectType === 'text') {
(0, canvasUtils_1.addTextToCanvas)(canvas, template.width || 800, template.height || 600, object.text, object.fontSize, object.fontFamily);
}
if (object.canvasObjectType === 'image') {
(0, canvasUtils_1.addFilesToCanvas)(canvas, object.files, object.width, object.height);
}
if (object.canvasObjectType === 'colour') {
canvas.add(object);
}
});
}
exports.addVariationsToCanvas = addVariationsToCanvas;