@rowsncolumns/grid 9.0.4 → 13.2.32

package/LICENSE.md

@@ -0,0 +1,100 @@
+# Rows n' Columns Commercial License Agreement
+
+This Rows n' Columns Commercial License Agreement (the "Agreement") governs
+the use of the Rows n' Columns software packages published under the
+`@rowsncolumns` npm scope, including associated JavaScript, WebAssembly
+binaries, stylesheets, type definitions and documentation (the "Software").
+
+The Software is **not** open source. Downloading or installing the Software
+from a public package registry does not grant any right to use it beyond the
+evaluation use described below.
+
+## 1. Definitions
+
+- **"Licensor"** means Rows n' Columns (rowsncolumns.app).
+- **"Licensee"** means the individual or legal entity identified in an Order.
+- **"Order"** means a purchase of a license for the Software from Licensor,
+  identified by an order ID and associated with a License Key.
+- **"License Key"** means the signed key issued by Licensor that identifies
+  the Licensee, license tier, and Update Window.
+- **"Update Window"** means the period stated in the Order during which
+  Software versions released by Licensor are covered by the License Key.
+
+## 2. License Grant
+
+Subject to payment of the applicable fees and compliance with this Agreement,
+Licensor grants Licensee a non-exclusive, non-transferable, worldwide license
+to use, and to distribute in compiled form as an embedded component of
+Licensee's own applications, any version of the Software released during the
+Update Window, in accordance with the license tier stated in the Order.
+
+This grant is perpetual for versions released during the Update Window:
+Licensee may continue to use those versions after the Update Window ends.
+Versions released after the Update Window ends require a new or renewed
+Order.
+
+## 3. Evaluation Use
+
+The Software may be used without a License Key solely for internal
+evaluation and development purposes. Evaluation use in production, or
+removal or suppression of evaluation notices, is not permitted.
+
+## 4. Restrictions
+
+Except as expressly permitted by this Agreement or by applicable law that
+cannot be contractually waived, Licensee shall not:
+
+1. redistribute, resell, sublicense, or otherwise make the Software
+   available as a standalone product, library, or development component;
+2. use the Software to build a product that competes with the Software;
+3. remove, alter, or circumvent License Key validation, evaluation notices,
+   watermarks, or copyright notices in the Software;
+4. share License Keys with any third party, or use a License Key outside
+   the scope of the tier stated in the Order;
+5. reverse engineer, decompile, or disassemble the Software except to the
+   extent permitted by applicable law.
+
+## 5. Ownership
+
+The Software is licensed, not sold. Licensor and its licensors retain all
+right, title, and interest in and to the Software, including all
+intellectual property rights.
+
+## 6. Third-Party Components
+
+The Software may include third-party open-source components. Those
+components remain governed by their own license terms, which are included
+with the applicable component and are not limited by this Agreement.
+
+## 7. Termination
+
+This Agreement terminates automatically upon material breach by Licensee
+that remains uncured 30 days after written notice. Upon termination,
+Licensee must cease use and distribution of the Software, except that
+end-user copies of Licensee applications already distributed in compliance
+with this Agreement are unaffected.
+
+## 8. Warranty Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+## 9. Limitation of Liability
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, IN NO EVENT SHALL LICENSOR BE LIABLE
+FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES,
+OR ANY LOSS OF PROFITS, DATA, OR GOODWILL, ARISING OUT OF OR RELATED TO THIS
+AGREEMENT, AND LICENSOR'S AGGREGATE LIABILITY SHALL NOT EXCEED THE FEES PAID
+BY LICENSEE IN THE TWELVE MONTHS PRECEDING THE CLAIM.
+
+## 10. General
+
+This Agreement constitutes the entire agreement between the parties
+concerning the Software and supersedes any prior agreements. If any
+provision is held unenforceable, the remainder remains in effect. Failure to
+enforce a provision is not a waiver.
+
+For licensing inquiries, visit <https://www.rowsncolumns.app/pricing>.
+
+Copyright © Rows n' Columns. All rights reserved.

package/Readme.md

@@ -10,8 +10,6 @@ Canvas table grid to render large set of tabular data. Uses virtualization simil
 
 [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/) [![Build Status](https://travis-ci.org/rowsncolumns/grid.svg?branch=master)](https://travis-ci.org/rowsncolumns/grid)
 
-
-
 [Demo](https://rowsncolumns.github.io/grid) | [Usage](#Usage) | [Wiki](https://github.com/rowsncolumns/grid/wiki/Extending-Konva-Grid-using-hooks)
 
 <kbd>![Screen capture](screencapture.gif)</kbd>
@@ -20,7 +18,7 @@ Canvas table grid to render large set of tabular data. Uses virtualization simil
 
 - :electron: React powered declarative library
 - :100: Virtualized: Only visible cells are rendered
-- :bulb: Performant: Canvas implementation - 55-60fps (re-render) and  40-60fps (scroll)
+- :bulb: Performant: Canvas implementation - 55-60fps (re-render) and 40-60fps (scroll)
 - :scroll: Supports scrolling using native scrollbars
 - :computer: Supports both Fixed and Variable sized grids
 - :fire: Freeze rows and columns
@@ -43,9 +41,11 @@ Born out of frustration, having to deal with complicated imperative canvas libra
 ## Installation
 
 #### npm
+
 ```
 npm install @rowsncolumns/grid --save
 ```
+
 #### yarn
 
 ```
@@ -74,18 +74,18 @@ Uses [react-table](https://github.com/tannerlinsley/react-table) to create group
 
 [https://github.com/rowsncolumns/grid/tree/master/examples/zustand](https://github.com/rowsncolumns/grid/tree/master/examples/zustand)
 
-*More examples coming soon.*
+_More examples coming soon._
 
 ## Usage
 
 ```js
-import { Grid, Cell } from '@rowsncolumns/grid'
-import { Group, Text, Rect } from 'react-konva'
+import { Grid, Cell } from "@rowsncolumns/grid";
+import { Group, Text, Rect } from "react-konva";
 
 const App = () => {
   const data = {
-    [[1, 2]]: 'Hello world'
-  }
+    [[1, 2]]: "Hello world",
+  };
 
   return (
     <Grid
@@ -96,54 +96,50 @@ const App = () => {
       rowHeight={(rowIndex) => 20}
       columnWidth={(columnIndex) => 100}
       itemRenderer={(props) => (
-        <Cell
-          {...props}
-          value={
-            data[[props.rowIndex, props.columnIndex]]
-          }
-        />
+        <Cell {...props} value={data[[props.rowIndex, props.columnIndex]]} />
       )}
     />
-  )
-}
+  );
+};
 ```
 
 ## Props
+
 This is the list of props that are meant to be used to customise the `konva-grid` behavior.
 
-| Name | Required | Type | Description | Default |
-|------|----------|------|-------------|---------|
-| width | true | number | Width of the grid container | 800 |
-| height| true | number | Height of the grid container | 800 |
-| columnCount | true | number | No of columns in the grid | 200 |
-| rowCount | true | number | No of rows in the grid | 200 |
-| rowHeight | true | function | Function that returns height of the row based on rowIndex | (rowIndex) => 20 |
-| columnWidth | true | function | Function that returns width of the column based on columnIndex | (columnIndex) => 100 |
-| itemRenderer | true | Function | React component to render the cell | null |
-| selectionRenderer | true | Function | React component to render selected cell | null |
-| scrollbarSize | false | number | Size of the scrollbar | 17 |
-| showScrollbar | false | boolean | Always show scrollbar | true |
-| selectionBackgroundColor | false | string | Background color of selected cells | rgba(66, 133, 244, 0.3) |
-| selectionBorderColor | false | string | Border color of bounding box of selected cells | rgba(66, 133, 244, 1) |
-| selectionStrokeWidth | false |  number | Border width of selection | 1 |
-| activeCellStrokeWidth | false |  number | Border width of activeCell | 2 |
-| activeCell | false | { rowIndex, columnIndex } | Recently active cell that user has clicked | null |
-| selections | false | Array | Array of selected cell areas | []|
-| mergedCells | false | Array | Array of merged cell areas | []|
-| cellAreas | false | Array | Increase the range of certain  cells | [] |
-| snap | false | boolean | Snaps to the next row or column as you scroll | false |
-| frozenRows | false | number | No of frozen rows | 0 |
-| frozenColumns | false | number | No of frozen columns | 0 |
-| showFrozenShadow| false | boolean | Show shadow in frozen columns/rows | true |
-| shadowSettings| false | object | Customize shadow of frozen columns/rows | true |
-| onBeforeRenderRow | false | Function | Called right before a row is rendered, useful for `react-table` | null |
-| stageProps | false | Object | Konva stage props | null |
-| children | false | Function | Inject React Konva shapes using children | null
-| wrapper | false | Function | Inject custom context using a wrapper | (children) => children |
-| showFillHandle | false | boolean | Show fill handle at bottom right corner | true |
-| onFillHandleMouseDown |  false | Function | Callback fired user selects fill handle | null |
-| fillSelection | false  | SelectionProp | Area of selected fill | null
-| overscanCount | false | number | Number of items outside the visible viewport should be renderer at all times | 1 |
+| Name                     | Required | Type                      | Description                                                                  | Default                 |
+| ------------------------ | -------- | ------------------------- | ---------------------------------------------------------------------------- | ----------------------- |
+| width                    | true     | number                    | Width of the grid container                                                  | 800                     |
+| height                   | true     | number                    | Height of the grid container                                                 | 800                     |
+| columnCount              | true     | number                    | No of columns in the grid                                                    | 200                     |
+| rowCount                 | true     | number                    | No of rows in the grid                                                       | 200                     |
+| rowHeight                | true     | function                  | Function that returns height of the row based on rowIndex                    | (rowIndex) => 20        |
+| columnWidth              | true     | function                  | Function that returns width of the column based on columnIndex               | (columnIndex) => 100    |
+| itemRenderer             | true     | Function                  | React component to render the cell                                           | null                    |
+| selectionRenderer        | true     | Function                  | React component to render selected cell                                      | null                    |
+| scrollbarSize            | false    | number                    | Size of the scrollbar                                                        | 17                      |
+| showScrollbar            | false    | boolean                   | Always show scrollbar                                                        | true                    |
+| selectionBackgroundColor | false    | string                    | Background color of selected cells                                           | rgba(66, 133, 244, 0.3) |
+| selectionBorderColor     | false    | string                    | Border color of bounding box of selected cells                               | rgba(66, 133, 244, 1)   |
+| selectionStrokeWidth     | false    | number                    | Border width of selection                                                    | 1                       |
+| activeCellStrokeWidth    | false    | number                    | Border width of activeCell                                                   | 2                       |
+| activeCell               | false    | { rowIndex, columnIndex } | Recently active cell that user has clicked                                   | null                    |
+| selections               | false    | Array                     | Array of selected cell areas                                                 | []                      |
+| mergedCells              | false    | Array                     | Array of merged cell areas                                                   | []                      |
+| cellAreas                | false    | Array                     | Increase the range of certain cells                                          | []                      |
+| snap                     | false    | boolean                   | Snaps to the next row or column as you scroll                                | false                   |
+| frozenRows               | false    | number                    | No of frozen rows                                                            | 0                       |
+| frozenColumns            | false    | number                    | No of frozen columns                                                         | 0                       |
+| showFrozenShadow         | false    | boolean                   | Show shadow in frozen columns/rows                                           | true                    |
+| shadowSettings           | false    | object                    | Customize shadow of frozen columns/rows                                      | true                    |
+| onBeforeRenderRow        | false    | Function                  | Called right before a row is rendered, useful for `react-table`              | null                    |
+| stageProps               | false    | Object                    | Konva stage props                                                            | null                    |
+| children                 | false    | Function                  | Inject React Konva shapes using children                                     | null                    |
+| wrapper                  | false    | Function                  | Inject custom context using a wrapper                                        | (children) => children  |
+| showFillHandle           | false    | boolean                   | Show fill handle at bottom right corner                                      | true                    |
+| onFillHandleMouseDown    | false    | Function                  | Callback fired user selects fill handle                                      | null                    |
+| fillSelection            | false    | SelectionProp             | Area of selected fill                                                        | null                    |
+| overscanCount            | false    | number                    | Number of items outside the visible viewport should be renderer at all times | 1                       |
 
 ## Methods
 
@@ -155,15 +151,14 @@ Scrolls the grid to a specified `x,y` position relative to the container
 
 Imperatively trigger re-render of the grid after specified `rowIndex` or `columnIndex`
 
-
 #### `getScrollPosition()`
 
-Get the current scroll position of the grid. 
+Get the current scroll position of the grid.
 
-````
+```
 const gridRef = useRef()
 const { scrollLeft, scrollTop } = gridRef.current.getScrollPosition()
-````
+```
 
 #### `isMergedCell({ rowIndex, columnIndex })`
 
@@ -175,13 +170,12 @@ Returns a selection `IArea` for a particular cell. Useful to get selection area
 
 #### `getCellCoordsFromOffsets(x , y)`
 
-Returns exact `rowIndex` and `columnIndex` from a `x`  and `y` cordinate. Useful if you want to get cell coords based on mouse position
+Returns exact `rowIndex` and `columnIndex` from a `x` and `y` cordinate. Useful if you want to get cell coords based on mouse position
 
 #### `getCellOffsetFromCoords({ rowIndex, columnIndex })`
 
 Returns offset position `{ x, y, width, height }` of a cell
 
-
 #### `stage`
 
 Access Konva `stage` instance
@@ -194,7 +188,7 @@ const gridRef = useRef()
 >
 
 const stage = gridRef.current.stage
-````
+```
 
 ## Passing Contexts
 
@@ -245,10 +239,10 @@ yarn run storybook
 
 Feel free to fork and submit pull requests
 
-````
+```
 git clone https://github.com/rowsncolumns/grid.git
 cd grid
 yarn
 // Run storybook
-yarn storybook 
-````
+yarn storybook
+```

package/dist/cjs/Cell.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { RendererProps } from "./Grid";
+export interface CellProps extends RendererProps {
+    value?: string;
+    color?: string;
+    padding?: number;
+    bold?: boolean;
+    italic?: boolean;
+    strikethrough?: boolean;
+    underline?: boolean;
+    lineHeight?: number;
+    textDecoration?: string;
+    verticalAlignment?: string;
+    horizontalAlignment?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    wrapStrategy?: string;
+    scale?: number;
+    backgroundColor?: string;
+    image?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Default cell component
+ * @param props
+ */
+declare const Cell: React.FC<CellProps>;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+declare const CellRenderer: (props: RendererProps) => React.JSX.Element;
+export default CellRenderer;
+export { CellRenderer, Cell };
+//# sourceMappingURL=Cell.d.ts.map

package/dist/cjs/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgD5B,CAAC;AAIH;;;GAGG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,aAAa,sBAEzC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC"}

package/dist/cjs/Cell.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = exports.CellRenderer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var helpers_1 = require("./helpers");
+/**
+ * Default cell component
+ * @param props
+ */
+var Cell = (0, react_1.memo)(function (props) {
+    var _a = props.x, x = _a === void 0 ? 0 : _a, _b = props.y, y = _b === void 0 ? 0 : _b, width = props.width, height = props.height, value = props.value, _c = props.horizontalAlignment, horizontalAlignment = _c === void 0 ? "left" : _c, _d = props.verticalAlignment, verticalAlignment = _d === void 0 ? "bottom" : _d, _e = props.color, color = _e === void 0 ? "#333" : _e, _f = props.padding, padding = _f === void 0 ? 3 : _f, _g = props.fontFamily, fontFamily = _g === void 0 ? "Arial" : _g, _h = props.fontSize, fontSize = _h === void 0 ? 12 : _h, children = props.children, _j = props.wrapStrategy, wrapStrategy = _j === void 0 ? "none" : _j, bold = props.bold, italic = props.italic, textDecoration = props.textDecoration, _k = props.lineHeight, lineHeight = _k === void 0 ? 1 : _k;
+    var textStyle = "".concat(bold ? "bold" : "normal", " ").concat(italic ? "italic" : "normal");
+    return (react_1.default.createElement(react_konva_1.Group, null,
+        (0, helpers_1.isNull)(value) ? null : (react_1.default.createElement(react_konva_1.Text, { x: x, y: y, height: height, width: width, text: value, fill: color, verticalAlign: verticalAlignment, align: horizontalAlignment, fontFamily: fontFamily, fontStyle: textStyle, textDecoration: textDecoration, padding: padding, wrap: wrapStrategy, fontSize: fontSize, hitStrokeWidth: 0, lineHeight: lineHeight })),
+        children));
+});
+exports.Cell = Cell;
+Cell.displayName = "Cell";
+/**
+ * Default CellRenderer
+ * @param props
+ */
+var CellRenderer = function (props) {
+    return react_1.default.createElement(Cell, tslib_1.__assign({}, props));
+};
+exports.CellRenderer = CellRenderer;
+exports.default = CellRenderer;

package/dist/{CellOverlay.d.ts → cjs/CellOverlay.d.ts}

@@ -1,8 +1,7 @@
 import React from "react";
-import { CellProps } from "./Cell";
-import { RendererProps } from "./Grid";
-export interface StrokeCellProps extends Omit<CellProps, "key" | "rowIndex" | "columnIndex"> {
-}
+import type { CellProps } from "./Cell";
+import type { RendererProps } from "./Grid";
+export type StrokeCellProps = Omit<CellProps, "key" | "rowIndex" | "columnIndex">;
 /**
  * Offset helps multiple borders to align properly
  * @param width
@@ -16,6 +15,7 @@ declare const CellOverlay: React.FC<StrokeCellProps>;
  * Default CellRenderer
  * @param props
  */
-declare const CellRenderer: (props: RendererProps) => JSX.Element | null;
+declare const CellRenderer: (props: RendererProps) => React.JSX.Element | null;
 export default CellRenderer;
 export { CellRenderer, CellOverlay };
+//# sourceMappingURL=CellOverlay.d.ts.map

package/dist/cjs/CellOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellOverlay.d.ts","sourceRoot":"","sources":["../../CellOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAK5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgJzC,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,aAAa,6BAmEzC,CAAC;AAGF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/cjs/CellOverlay.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellOverlay = exports.CellRenderer = exports.getOffsetFromWidth = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+/* Array placeholder */
+var EMPTY_ARRAY = [];
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+var getOffsetFromWidth = function (width) {
+    return width / 2 - 0.5;
+};
+exports.getOffsetFromWidth = getOffsetFromWidth;
+/**
+ * Only used for strokes
+ */
+var CellOverlay = (0, react_1.memo)(function (props) {
+    var x = props.x, y = props.y, width = props.width, height = props.height, strokeTopColor = props.strokeTopColor, strokeRightColor = props.strokeRightColor, strokeBottomColor = props.strokeBottomColor, strokeLeftColor = props.strokeLeftColor, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _a = props.strokeTopDash, strokeTopDash = _a === void 0 ? EMPTY_ARRAY : _a, _b = props.strokeRightDash, strokeRightDash = _b === void 0 ? EMPTY_ARRAY : _b, _c = props.strokeBottomDash, strokeBottomDash = _c === void 0 ? EMPTY_ARRAY : _c, _d = props.strokeLeftDash, strokeLeftDash = _d === void 0 ? EMPTY_ARRAY : _d, _e = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _e === void 0 ? EMPTY_ARRAY : _e, _f = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _f === void 0 ? EMPTY_ARRAY : _f, _g = props.strokeTopWidth, strokeTopWidth = _g === void 0 ? 0 : _g, _h = props.strokeRightWidth, strokeRightWidth = _h === void 0 ? 0 : _h, _j = props.strokeBottomWidth, strokeBottomWidth = _j === void 0 ? 0 : _j, _k = props.strokeLeftWidth, strokeLeftWidth = _k === void 0 ? 0 : _k, _l = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _l === void 0 ? 0 : _l, _m = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _m === void 0 ? 0 : _m, lineCap = props.lineCap;
+    var userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: function (context, shape) {
+            /* Top border */
+            if (strokeTopColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? (0, exports.getOffsetFromWidth)(strokeRightWidth) + 1 : 1), 0.5);
+                context.setAttr("strokeStyle", strokeTopColor);
+                context.setAttr("lineWidth", strokeTopWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeTopDash);
+                context.stroke();
+            }
+            /* Bottom border */
+            if (strokeBottomColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, shape.height() + 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? (0, exports.getOffsetFromWidth)(strokeRightWidth) + 1 : 1), shape.height() + 0.5);
+                context.setAttr("lineWidth", strokeBottomWidth);
+                context.setAttr("strokeStyle", strokeBottomColor);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeBottomDash);
+                context.stroke();
+            }
+            /* Left border */
+            if (strokeLeftColor) {
+                context.beginPath();
+                context.moveTo(0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
+                context.lineTo(0.5, shape.height() +
+                    (strokeBottomColor
+                        ? (0, exports.getOffsetFromWidth)(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeLeftColor);
+                context.setAttr("lineWidth", strokeLeftWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeLeftDash);
+                context.stroke();
+            }
+            /* Right border */
+            if (strokeRightColor) {
+                context.beginPath();
+                context.moveTo(shape.width() + 0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
+                context.lineTo(shape.width() + 0.5, shape.height() +
+                    (strokeBottomColor
+                        ? (0, exports.getOffsetFromWidth)(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeRightColor);
+                context.setAttr("lineWidth", strokeRightWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeRightDash);
+                context.stroke();
+            }
+            /* Diagonal: top-left to bottom-right (diagonalDown) */
+            if (strokeDiagonalDownColor) {
+                context.beginPath();
+                context.moveTo(0, 0);
+                context.lineTo(shape.width(), shape.height());
+                context.setAttr("strokeStyle", strokeDiagonalDownColor);
+                context.setAttr("lineWidth", strokeDiagonalDownWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalDownDash);
+                context.stroke();
+            }
+            /* Diagonal: bottom-left to top-right (diagonalUp) */
+            if (strokeDiagonalUpColor) {
+                context.beginPath();
+                context.moveTo(0, shape.height());
+                context.lineTo(shape.width(), 0);
+                context.setAttr("strokeStyle", strokeDiagonalUpColor);
+                context.setAttr("lineWidth", strokeDiagonalUpWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalUpDash);
+                context.stroke();
+            }
+        } }));
+});
+exports.CellOverlay = CellOverlay;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+var CellRenderer = function (props) {
+    var x = props.x, y = props.y, width = props.width, height = props.height, stroke = props.stroke, _a = props.strokeTopColor, strokeTopColor = _a === void 0 ? stroke : _a, _b = props.strokeRightColor, strokeRightColor = _b === void 0 ? stroke : _b, _c = props.strokeBottomColor, strokeBottomColor = _c === void 0 ? stroke : _c, _d = props.strokeLeftColor, strokeLeftColor = _d === void 0 ? stroke : _d, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _e = props.strokeDash, strokeDash = _e === void 0 ? EMPTY_ARRAY : _e, _f = props.strokeTopDash, strokeTopDash = _f === void 0 ? EMPTY_ARRAY : _f, _g = props.strokeRightDash, strokeRightDash = _g === void 0 ? EMPTY_ARRAY : _g, _h = props.strokeBottomDash, strokeBottomDash = _h === void 0 ? EMPTY_ARRAY : _h, _j = props.strokeLeftDash, strokeLeftDash = _j === void 0 ? EMPTY_ARRAY : _j, _k = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _k === void 0 ? EMPTY_ARRAY : _k, _l = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _l === void 0 ? EMPTY_ARRAY : _l, _m = props.strokeWidth, strokeWidth = _m === void 0 ? 1 : _m, _o = props.strokeTopWidth, strokeTopWidth = _o === void 0 ? strokeWidth : _o, _p = props.strokeRightWidth, strokeRightWidth = _p === void 0 ? strokeWidth : _p, _q = props.strokeBottomWidth, strokeBottomWidth = _q === void 0 ? strokeWidth : _q, _r = props.strokeLeftWidth, strokeLeftWidth = _r === void 0 ? strokeWidth : _r, _s = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _s === void 0 ? strokeWidth : _s, _t = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _t === void 0 ? strokeWidth : _t, _u = props.lineCap, lineCap = _u === void 0 ? "butt" : _u, key = props.key;
+    var userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (react_1.default.createElement(CellOverlay, { key: key, x: x, y: y, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap }));
+};
+exports.CellRenderer = CellRenderer;
+CellOverlay.displayName = "CellOverlay";
+exports.default = CellRenderer;

package/dist/cjs/Context.d.ts

@@ -0,0 +1,8 @@
+import type { CellInterface, CellPosition } from "./Grid";
+type GridContext = {
+    getCellOffsetFromCoords(coords: CellInterface, readonly?: boolean): CellPosition | undefined;
+};
+export declare const GridContext: import("react").Context<GridContext | undefined>;
+export declare const useGridContext: () => GridContext;
+export {};
+//# sourceMappingURL=Context.d.ts.map

package/dist/cjs/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../Context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE1D,KAAK,WAAW,GAAG;IACjB,uBAAuB,CACrB,MAAM,EAAE,aAAa,EACrB,QAAQ,CAAC,EAAE,OAAO,GACjB,YAAY,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,cAAc,mBAM1B,CAAC"}

package/dist/cjs/Context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridContext = exports.GridContext = void 0;
+var react_1 = require("react");
+exports.GridContext = (0, react_1.createContext)(undefined);
+var useGridContext = function () {
+    var contextValue = (0, react_1.useContext)(exports.GridContext);
+    if (!contextValue) {
+        throw "Wrap your grid in GridContext.Provider";
+    }
+    return contextValue;
+};
+exports.useGridContext = useGridContext;

package/dist/{FillHandle.d.ts → cjs/FillHandle.d.ts}

@@ -1,7 +1,8 @@
+import type { ShapeConfig } from "konva/lib/Shape";
 import React from "react";
-import { ShapeConfig } from "konva/lib/Shape";
 /**
  * Fill handle component
  */
 declare const FillHandle: React.FC<ShapeConfig>;
 export default FillHandle;
+//# sourceMappingURL=FillHandle.d.ts.map

package/dist/cjs/FillHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillHandle.d.ts","sourceRoot":"","sources":["../../FillHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4BrC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/cjs/FillHandle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+/**
+ * Fill handle component
+ */
+var FillHandle = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, _e = _a.size, size = _e === void 0 ? 8 : _e, borderColor = _a.borderColor, props = tslib_1.__rest(_a, ["x", "y", "stroke", "strokeWidth", "size", "borderColor"]);
+    if (x === 0 || y === 0)
+        return null;
+    return (react_1.default.createElement("div", tslib_1.__assign({ style: {
+            position: "absolute",
+            transform: "translate3d(".concat(x - size / 2, "px, ").concat(y - size / 2, "px, 0)"),
+            transformOrigin: "0, 0",
+            width: size,
+            height: size,
+            border: "".concat(strokeWidth, "px ").concat(borderColor, " solid"),
+            borderRightWidth: 0,
+            borderBottomWidth: 0,
+            background: stroke,
+            cursor: "crosshair",
+            pointerEvents: "all",
+        } }, props)));
+};
+exports.default = FillHandle;