merchi_product_editor
Version:
A React component for editing product images using Fabric.js
92 lines (91 loc) • 3.09 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; }
// 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);
}
fabricCanvas.renderAll();
};
exports.drawGrid = drawGrid;
/**
* save the grid state on the canvas
* @param fabricCanvas
*/
var saveGridState = function (fabricCanvas) {
return fabricCanvas.getObjects().filter(function (obj) { var _a; return (_a = obj.data) === null || _a === void 0 ? void 0 : _a.isGrid; });
};
exports.saveGridState = saveGridState;
/**
* bring grid lines to front of the canvas
* @param fabricCanvas
* @param gridLines
*/
var bringGridToFront = function (fabricCanvas, gridLines) {
if (gridLines && gridLines.length > 0) {
gridLines.forEach(function (line) { return fabricCanvas.bringToFront(line); });
}
};
exports.bringGridToFront = bringGridToFront;
/**
* send grid lines to back of the canvas
* @param fabricCanvas
* @param gridLines
*/
var sendGridToBack = function (fabricCanvas, gridLines) {
if (gridLines && gridLines.length > 0) {
gridLines.forEach(function (line) { return fabricCanvas.sendToBack(line); });
}
};
exports.sendGridToBack = sendGridToBack;
/**
* clear all objects except the grid on the canvas
* @param fabricCanvas
*/
var clearCanvasExceptGrid = function (fabricCanvas) {
fabricCanvas.getObjects().forEach(function (obj) {
var _a;
if (!((_a = obj.data) === null || _a === void 0 ? void 0 : _a.isGrid)) {
fabricCanvas.remove(obj);
}
});
};
exports.clearCanvasExceptGrid = clearCanvasExceptGrid;