react-konva-grid
Version:
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets
31 lines • 2.07 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createBox = void 0;
const react_1 = __importDefault(require("react"));
const react_konva_1 = require("react-konva");
/**
* Create a box with custom top/right/bottom/left colors and widths
* @param param0
*/
exports.createBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, }) => {
const commonProps = {
perfectDrawEnabled: false,
shadowForStrokeEnabled: false,
hitStrokeWidth: 0,
listening: false,
lineCap: "square",
};
const lines = [
react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x, y, x + width, y], stroke: strokeTopColor, strokeWidth: strokeTopWidth, key: "top" }, commonProps)),
react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x + width, y, x + width, y + height], stroke: strokeRightColor, strokeWidth: strokeRightWidth, key: "right" }, commonProps)),
react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x + width, y + height, x, y + height], stroke: strokeBottomColor, strokeWidth: strokeBottomWidth, key: "bottom" }, commonProps)),
react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x, y + height, x, y], stroke: strokeLeftColor, strokeWidth: strokeLeftWidth, key: "left" }, commonProps)),
];
return (react_1.default.createElement(react_1.default.Fragment, { key: key },
lines,
fill && (react_1.default.createElement(react_konva_1.Rect, Object.assign({ fill: fill, x: x, y: y, width: width, height: height }, commonProps)))));
};
//# sourceMappingURL=utils.js.map