merchi_product_editor
Version:
A React component for editing product images using Fabric.js
152 lines (151 loc) • 4.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.clearCanvasExceptGrid = exports.sendGridToBack = exports.bringGridToFront = exports.saveGridState = exports.drawGrid = void 0;
var fabric_1 = require("fabric");
/**
* @param fabricCanvas
* @param width
* @param height
* @param gridSize
* @param lineColor
* @param enabled
*/
var drawGrid = function (fabricCanvas, width, height, gridSize, lineColor, enabled) {
if (gridSize === void 0) { gridSize = 20; }
if (lineColor === void 0) { lineColor = '#e0e0e0'; }
if (enabled === void 0) { enabled = true; }
// First, make sure fabricCanvas is not null
if (!fabricCanvas) {
console.warn('drawGrid: fabricCanvas is null or undefined');
return;
}
// Make sure the canvas element exists and is valid
try {
// This will throw an error if the canvas element is no longer in the DOM
if (!fabricCanvas.getElement() || !fabricCanvas.getElement().parentNode) {
console.warn('drawGrid: Canvas element is not in the DOM');
return;
}
}
catch (e) {
console.warn('drawGrid: Error checking canvas element:', e);
return;
}
// remove all existing grid lines
var gridLines = fabricCanvas.getObjects().filter(function (obj) { var _a; return (_a = obj.data) === null || _a === void 0 ? void 0 : _a.isGrid; });
gridLines.forEach(function (line) { return fabricCanvas.remove(line); });
if (!enabled)
return;
// draw vertical lines
for (var i = 0; i <= width; i += gridSize) {
var line = new fabric_1.fabric.Line([i, 0, i, height], {
stroke: lineColor,
strokeWidth: 0.5,
opacity: 0.3,
selectable: false,
evented: false,
data: { isGrid: true }
});
fabricCanvas.add(line);
}
// draw horizontal lines
for (var i = 0; i <= height; i += gridSize) {
var line = new fabric_1.fabric.Line([0, i, width, i], {
stroke: lineColor,
strokeWidth: 0.5,
opacity: 0.3,
selectable: false,
evented: false,
data: { isGrid: true }
});
fabricCanvas.add(line);
}
try {
fabricCanvas.renderAll();
}
catch (e) {
console.error('drawGrid: Error rendering grid:', e);
}
};
exports.drawGrid = drawGrid;
/**
* save the grid state on the canvas
* @param fabricCanvas
*/
var saveGridState = function (fabricCanvas) {
if (!fabricCanvas) {
console.warn('saveGridState: fabricCanvas is null or undefined');
return [];
}
try {
var objs = fabricCanvas.getObjects().filter(function (obj) { return obj; });
return objs;
}
catch (e) {
console.warn('saveGridState: Error getting grid objects:', e);
return [];
}
};
exports.saveGridState = saveGridState;
/**
* bring grid lines to front of the canvas
* @param fabricCanvas
* @param gridLines
*/
var bringGridToFront = function (fabricCanvas, gridLines) {
if (!fabricCanvas) {
console.warn('bringGridToFront: fabricCanvas is null or undefined');
return;
}
if (gridLines && gridLines.length > 0) {
try {
gridLines.forEach(function (line) { return fabricCanvas.bringToFront(line); });
}
catch (e) {
console.warn('bringGridToFront: Error bringing grid to front:', e);
}
}
};
exports.bringGridToFront = bringGridToFront;
/**
* send grid lines to back of the canvas
* @param fabricCanvas
* @param gridLines
*/
var sendGridToBack = function (fabricCanvas, gridLines) {
if (!fabricCanvas) {
console.warn('sendGridToBack: fabricCanvas is null or undefined');
return;
}
if (gridLines && gridLines.length > 0) {
try {
gridLines.forEach(function (line) { return fabricCanvas.sendToBack(line); });
}
catch (e) {
console.warn('sendGridToBack: Error sending grid to back:', e);
}
}
};
exports.sendGridToBack = sendGridToBack;
/**
* clear all objects except the grid on the canvas
* @param fabricCanvas
*/
var clearCanvasExceptGrid = function (fabricCanvas) {
if (!fabricCanvas) {
console.warn('clearCanvasExceptGrid: fabricCanvas is null or undefined');
return;
}
try {
fabricCanvas.getObjects().forEach(function (obj) {
var _a;
if (!((_a = obj.data) === null || _a === void 0 ? void 0 : _a.isGrid)) {
fabricCanvas.remove(obj);
}
});
}
catch (e) {
console.warn('clearCanvasExceptGrid: Error clearing canvas:', e);
}
};
exports.clearCanvasExceptGrid = clearCanvasExceptGrid;